* ngFor Looping над массивом

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>

неверный тип параметра функции подписки - любой [ ], это не массив, это {body: any []}, поэтому я бы сказал, что измените его на любое, по крайней мере, или так как это TypeScript, возможно, создайте интерфейс, который соответствует структуре ответа.

Answer 3

Ошибка в том, что * NgFor работает только для [Массивы] и [Объекты с 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?"
    }]
}
}