Как отобразить массив с индексами. Я получаю массив из HTTP-запроса GET

Question

Я пытаюсь отобразить список категорий. Я использовал *ngFor, чтобы получить массив в ion-list. мой массив получен из HTTP GET запроса. но данные с сервера имеют индексы, и я не могу отобразить все данные в массиве. Я приложил свои home.ts и home.html и console.log

home.ts:

  private products = [];
  constructor(private httpClient: HttpClient) {}

  get_products() {
    this.httpClient.get("http://test.vazy.co.ke/api-categories").subscribe((res: any[]) => {
      console.log(res);
      this.products = res["data"];

      console.log(this.products);
      for (var i = 0; i < this.products.length; i++) {
        this.products[i];
      }
    });
  }

home.html:

<button (click)="get_products()">GET /products</button>
<ion-list *ngFor="let product of products">
  <ion-text>
    {{ product[i] }}
  </ion-text>
</ion-list>

Answer 1

попробуйте *ngFor="let product of products; let i of index;", чтобы получить индекс.

и {{ product }} автоматически напечатают индексированное значение.

например products = [ 'a', 'b', 'c' ];

<ul>
    <li *ngFor="let product of products"> {{ product }} </li>
</ul>

// output
<ul>
    <li> a </li>
    <li> b </li>
    <li> c </li>
</ul>

и если ваша переменная продуктов содержит products = [{ name: 'a', name: 'b', name: 'c' }]

<ul>
    <li *ngFor="let product of products"> {{ product.name }} </li>
</ul>

// output
<ul>
    <li> a </li>
    <li> b </li>
    <li> c </li>
</ul>

---

На основе результатов вашей продукции создана демоверсия

Демонстрационная ссылка Stackbliz

Answer 2

<button (click)="get_products()">GET /products</button>
<ion-list *ngFor="let product of products; let i of index;">
<ion-text>
    {{ product[i] }}
</ion-text>
</ion-list>