*ngFor 循环遍历数组答案

【问题标题】：*ngFor Looping over array*ngFor 循环遍历数组
【发布时间】：2020-02-29 22:58:53
【问题描述】：

我有以下数组：

{
    "body": [{
        "coursename": "introto1",
        "course-lesson-name": "Welcome to One! "
    }, {
        "coursename": "introto2",
        "course-lesson-name": "What is One?"
    }, {
        "coursename": "introto2",
        "course-lesson-name": "What Can We do with One?"
    }]
}

我正在使用以下 *ngFor 对其进行迭代：

<div>
    <div class="col-sm-4" *ngFor="let product of products | keyvalue">
        <a>{{ products.body[0]['coursename'] }}</a>
    </div>
</div>

显然，以上内容只锁定到第一个元素，我用什么来代替元素编号（body[0]）作为可迭代对象？强>

如果需要，这是我的组件：

export class NavigationComponent implements OnInit {

  products;

  constructor(private dataService: MenuserviceService) { }

  ngOnInit() {

    this.dataService.sendGetRequest().subscribe((data: any[])=>{
      console.log(data);
      this.products = data;
    })  
  }

}

【问题讨论】：

标签： arrays json angular

【解决方案1】：

使用product 变量而不是products.body[0] 并且不要使用keyvalue 管道：

<div>
    <div class="col-sm-4" *ngFor="let product of products?.body">
        <a>{{ product['coursename'] }}</a>
    </div>
</div>

当您迭代对象的属性而不是数组时，您将使用 keyvalue：KeyValuePipe

也可以查看page，了解如何使用NgForOf。

【讨论】：

我已经尝试过了并且得到了这个错误：NgFor 只支持绑定到 Iterables，比如数组。这就是我使用 keyValue 的原因。
尝试使用异步管道代替键值
async 将与 Observables 一起使用，但 products 变量不是 Observable。
@MondKin 我猜products 在您尝试迭代时没有定义，所以我相信使用安全导航运算符 (?) 应该可以解决您的问题： *ngFor="let product of products?.body"。或者，更好的是@DataGuy，我建议你使用async pipe :)
@MondKin products 在组件中定义为空来保存响应。

【解决方案2】：

错误是因为 *NgFor 仅适用于 [Arrays] 和 [Objects with keyValue]

https://stackblitz.com/edit/angular-v812v6

看看这个

<div>
    <div class="col-sm-4" *ngFor="let product of response.body">
        <a>{{ product['coursename'] }}</a>
    </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  response = {
    "body": [{
        "coursename": "introto1",
        "course-lesson-name": "Welcome to One! "
    }, {
        "coursename": "introto2",
        "course-lesson-name": "What is One?"
    }, {
        "coursename": "introto2",
        "course-lesson-name": "What Can We do with One?"
    }]
}
}

【讨论】：

【解决方案3】：

这里不需要keyvalue，body是一个对象数组，ngFor主要用于迭代思想数组

<div class="col-sm-4" *ngFor="let product of products?.body">
   <a>{{ product.coursename }}</a>
</div>

您的订阅函数参数类型不正确 - any[]，它不是一个数组，它是 {body: any[]}，所以我会说至少将它更改为 any，或者因为它是 TypeScript 可能会创建一个对应响应结构的接口。

【讨论】：