*ngFor 循环遍历数组

Question

I have the following array:

{
    "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?"
    }]
}

and I am using the following *ngFor to iterate over it:

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

Obviously, the above is locked down to the first element only, what do I use instead of the element number (body[0]) to serve as as the iterable?

here is my component if its needed:

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

Use the product variable instead of products.body[0] and don't use the keyvalue pipe:

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

You would use keyvalue when you are iterating over an object's properties, not an array: KeyValuePipe

Check also this page about how to use NgForOf .

Answer 2

Error is because *NgFor works only for [Arrays] and [Objects with keyValue]

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

Check this out

<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?"
    }]
}
}

Answer 3

you don't need here keyvalue, body is an array of objects and ngFor is mostly for iterating thought arrays

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

your subscription function parameter type is incorrect - any[], it is not an array, it is {body: any[]}, so I would say change it to any at least, or as it is TypeScript maybe create an interface that corresponds the response structure.