I'm returning an array object from a http service call (successfully) and
can console.log() the result without incident. However when I try looping
through the array in my .html I get an error message.
In my .html template I'm trying to use the following code to display the
results:
<div *ngFor="let result of results" style="border: thin solid silver;">
{{result.id}}<br>
{{result.crew}}<br>
{{result.orderno}}<br>
{{result.jobnumber}}<br>
{{result.yards}}<br>
{{result.delivery}}
</div>
When I attempt to loop through the array (results) in my .html template I
get the following error:
ERROR Error: Cannot find a differ supporting object '[{ID: '1', ORDERNO:
'160', CREW: '2', JOBNUMBER: '1702377', YARDS: '40', DELIVERY: 'Elm/Turrant
Drive'},{ID: '2', ORDERNO: '44', CREW: '3', JOBNUMBER: '1702391', YARDS:
'90', DELIVERY: '2099 Steele Street'}....]
It seems like Angular doesn't recognize the data from my service call as an
array, because I can copy the service call results from the console and
paste this exact array into my ..component.ts file, and Angular runs just
fine.
Service call code, outputs to console just fine, gives me ERROR above:
app.component.ts
...
onGet() {
this.dataService.getAllOrders()
.subscribe(
(data: any[]) => this.results=data, (for testing, on this line I used
((data: any[] => console.log(data),)
(error) => console.log(error)
);
}
....
same app.component.ts file where I hardcoded the service call results to a
variable. Outputs in .html template fine.
concreteorders = [
{orderno: '160', crew: '2', jobno: '1702377', yards: '40', delivery:
'Elm/Turant Streets'},
{orderno: '44', crew: '3', jobno: '1702391', yards: '90', delivery:
'2099 Steele Street'},
{orderno: '19', crew: '5', jobno: '1702294', yards: '30', delivery:
'Mountain Medical - East Campus'},
{orderno: '66', crew: '6', jobno: '1702364', yards: '55', delivery:
'Estes Regional Development Center'},
{orderno: '69', crew: '7', jobno: '1702272', yards: '170', delivery:
'Airport Blvd/Terrance lot'},
{orderno: '102', crew: '9', jobno: '1702321', yards: '10', delivery:
'Lakes/SE 40th'},
{orderno: '36', crew: '10', jobno: '1702289', yards: '80', delivery:
'Boulder TpkPecos Blvd'}
];
So I don't think it's value returned from the service call as I copied and
pasted it exactly and it worked!
After some Google searches I found this:
https://github.com/angular/angular/issues/6392
and while it seems the verbiage of the reporting error message has been
updated there doesn't seem to be a fix that anyone can point to.... I tried
the hack() and a few other things mentioned but couldn't get anything to
finally work.
Am I missing a new way to loop through an array returned from a http
service call?
Many thanks,
Rich
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
