why typescript array returned appears as '[object Object]' instead of Iterable for ngFor?

0
votes

I am trying to create a simple array of strings(Iteratable) in typescript and use Angular ngFor to display all of them on my page. I tried several ways of creating an array but none of them return iteratable back.

the last effort I did looks like this. 

  vehicles: String[] = [];

  ngOnInit() {
    this.vehicles.push('vehicle 1');
    this.vehicles.push('vehicle 2');
    this.vehicles.push('vehicle 3');
    this.vehicles.push('vehicle 4');
    this.vehicles.push('vehicle 5');
    console.log(this.vehicles);
  }

I also tried

  vehicles = ['Vehicle 1', 'Vehicle 2', 'Vehicle 3', 'Vehicle 4', 'Vehicle 5'];

or

  vehicles: ['Vehicle 1', 'Vehicle 2', 'Vehicle 3', 'Vehicle 4', 'Vehicle 5'];

even 

  vehicles = <String[]>['Vehicle 1', 'Vehicle 2', 'Vehicle 3', 'Vehicle 4', 'Vehicle 5'];

but in all of the cases when I use ngFor:

<div *ngFor="let vehicle of vehicles">
    <div class="row" #row>
        <mat-card>{{vehicle}}</mat-card>
    </div>
</div>

I get the error

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

when I print console.log(this.vehicles) I get the response as expected:

["Vehicle 1", "Vehicle 2", "Vehicle 3", "Vehicle 4", "Vehicle 5"]

how do I return the array as array Iterable and not object '[object Object]'?

3
arraysangulartypescript
try declaring the array like this: var vehicles = []; and leave the rest as it is.. - Harshith Rai
I get the same error. - Vato
When I type {{vehicles}} in HTML I am getting '[object Object]' printed out on the page. - Vato
Your code looks absolutely fine. Try declaring vehicle as public.. - Torab Shaikh
public doesn't change anything either. I'll look into the rest of the code maybe include if anything might be related to this. - Vato

3 Answers

0
votes

You current code looks absolutely fine. It require some change in html, instead of printing vehicles, print vehicle.

<div *ngFor="let vehicle of vehicles">
    <div class="row" #row>
        <mat-card>{{vehicle}}</mat-card> <!-- vehicles is changed to vechicle -->
    </div>
</div>

If are encountered with same error again, then you are getting this error from other code.

Follow the steps to debug the issue

Case 1

Remove the entire *ngFor segment and check if you are getting the error ?

<div></div>

Case 2

Check if the following code is throwing the error

<div *ngFor="let vehicle of vehicles">
    {{vehicle}}
</div>

Case 3

Check if the following code is throwing the error

<div *ngFor="let vehicle of vehicles">
    div class="row" #row>
        {{vehicle}}
    </div>
</div>
0
votes

I figured it out. I changed the name of object from vehicles to myObject and It worked. I looked into the html code and In a non-related place I found this code.

  <mat-form-field>
    <mat-select [(ngModel)]="vehicle" name="vehicle" (selectionChange)="languageSelect()" #vehicles="ngModel">
    </mat-select>
  </mat-form-field>

#vehicles="ngModel" was screwing the ngFor before. I didn't realize I had the #vehicles later in the code or it would have any relation to my ngFor before. I think I accidantely left it from earlier code.

I also changed #vehicles to #myobjects seeing if the error would appear again. And yes it did. so the problem was definately in naming or repeating code.

-1
votes

You need to replace {{vehicles}} with {{vehicle}} in the mat-card tag.