Question

我正在尝试在打字稿中创建一个简单的字符串数组（可迭代），并使用Angular ngFor在我的页面上显示所有字符串。我尝试了几种创建数组的方法，但是没有一种方法可以将其迭代返回。

我所做的最后一次努力是这样的。

  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);
  }

我也尝试过

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

或

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

偶

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

但是在所有使用ngFor的情况下：

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

我得到了错误

错误错误：找不到其他支持对象'[对象对象]' 类型为“对象”。 NgFor仅支持绑定到Iterables，例如数组。

当我打印console.log（this.vehicles）时，得到了预期的响应：

[“汽车1”，“汽车2”，“汽车3”，“汽车4”，“汽车5”]

如何将数组返回为Iterable而不是对象'[object Object]'？

Answer 1

您当前的代码看起来绝对不错。它需要对html进行一些更改，而不是打印fragments，而要打印vehicles。

vehicle

如果再次遇到相同的错误，则说明您是从其他代码中获取此错误的。

按照步骤调试问题

案例1

删除整个* ngFor段并检查是否收到错误？

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

案例2

检查以下代码是否引发错误

<div></div>

案例3

检查以下代码是否引发错误

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

Answer 2

我知道了。我将对象的名称从车辆更改为myObject并成功了。我查看了html代码，并在一个不相关的地方找到了此代码。

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

＃vehicles =“ ngModel”之前已将ngFor拧紧。我没有意识到我在代码的后面有#vehicles，否则以前与ngFor没有任何关系。我想我很偶然地从早期代码中删除了它。

我还将#vehicles更改为#myobjects，以查看错误是否会再次出现。是的，确实如此。所以问题肯定是在命名或重复代码。

Answer 3

您需要在席卡标签中将{{vehicles}}替换为{{vehicle}}。

为什么返回的打字稿数组显示为“ [object Object]”而不是ngFor的Iterable？

3 个答案:

案例1

案例2

案例3