Angular Ionic：尝试 diff 'value' 时出错。只允许数组和可迭代对象

Question

我试图显示列表值，当我控制列表的日志值时，它与我想要的完全一样，就像这样

unit value {id: 81, name: "3 BR Suite"}
unit value {id: 82, name: "3 BR Grande"}
unit value {id: 83, name: "Pool Villa"}
unit value {id: 84, name: "Penthouse"}

但是当我尝试在 html 中显示它时，出现错误“尝试 diff 'Penthouse' 时出错。只允许数组和迭代”

这是我的 .ts 代码

private unitList: any = [];
  getUnit() {
    this.oppCtrl.token_promise.then(() => {
      this.oppCtrl.getUnitType(this.productID).subscribe(response => {
        response.forEach(data => {
          this.unitList = data;
          console.log("unit value", this.unitList);
        },);
      },
      (err) => {
        let error = err.json();
        this.globalService.toastInfo(error.message ? error.message : 'Failed, please check your internet connection...', 3000, 'bottom');
        console.log(err);
      })
    })
  }

这是我的html代码

 <ion-card *ngFor="let item of unitList" (click)="save(item.id, item.name)">
<ion-list>
   <button ion-item style="border-bottom: none !important; padding-bottom: 0px; padding-left: 10px;"> 
    <ion-grid no-padding>
      <ion-row>
        <ion-col text-left col-12>
          <p class="sourceList">{{item.name}}</p>
        </ion-col>
      </ion-row>
    </ion-grid>
   </button> 
</ion-list>

你们能帮我解决一下吗？非常感谢

Answer 1

尝试删除 response 上的 forEach。您实际上并没有在 HTML 模板中使用数组。

让我们试试这个：

this.oppCtrl.token_promise.then(() => {
  this.oppCtrl.getUnitType(this.productID).subscribe(response => {
    this.unitList = response;
    console.log("unit value", this.unitList);
  },
  (err) => {...})
})

让你的 unitList 属性 public : unitList: any = [];

请注意，一开始，unitList 将为空。所以您的 HTML 将显示一个空列表。然后，在渲染路线时，您将能够管理您的数据。也许您更愿意使用 Observable ?

Angular Ionic：尝试 diff 'value' 时出错。只允许数组和可迭代对象

Angular Ionic : Error trying to diff 'value'. Only arrays and iterables are allowed

arrays

iterable

ionic-framework

angular