arrays - *ngFor 循环遍历数组

Question

我有以下数组：

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

}

Answer 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

另请查看此页面以了解如何使用NgForOf.

Answer 2

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

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

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

Answer 3

错误是因为 *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?"
    }]
}
}