Итерация массива внутри объекта Angular 6

Question

Я получаю объект через API с помощью этого метода:

this.someService.getStuffFromAPI(this.idUser, 'Area')
  .pipe(first())
    .subscribe(
      data => {
       this.stuffOnView = data;
      },
      error => {
        console.log(error);
      }
    );

Возвращает объект с массивом, например: В моем HTML мне удалось получить длину массива, используя это:

<div class="task-group" *ngFor="let key of objectKeys(stuffOnView)">
 <span class="column-title">
   {{ key.length }} Items to display
 </span>

Но я не могу получить свойства внутри массива, такие как idRec и т. Д.

Как я могу выполнить итерацию, чтобы получить свойства массива?

Спасибо за вашу помощь.

Answer 1

Я предлагаю вам определить интерфейс, как показало @DeborahK.В качестве альтернативы вы можете использовать Angular keyvalue pipe .Выходной массив будет упорядочен по ключам, поэтому, если ваш проект чувствителен к порядку, вы не должны использовать это.Я настоятельно рекомендую против этого, потому что он слишком сильно зависит от структуры данных и может легко сломаться, если ваша структура данных ответа изменится.

<div class="task-group" *ngFor="let object of result | keyvalue">
  <span class="column-title">
    {{ object?.value?.length }} Items to display
  </span>
  <ng-container *ngIf="object?.value?.length">
    <div class="task-item" *ngFor="let item of object.value">
      {{ item.idRec }}
    </div>
  </ng-container>
</div>

Answer 2

Один простой способ сделать это - определить интерфейс, который описывает расположение элементов вашего массива.Например, мой массив продуктов имеет такой интерфейс:

export interface Product {
  id: number;
  productName: string;
  productCode: string;
  category: string;
  tags?: string[];
  releaseDate: string;
  price: number;
  description: string;
  starRating: number;
  imageUrl: string;
}

Метод http get Angular автоматически сопоставит входящий массив API с массивом этих объектов:

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productsUrl);
  }

Обратите внимание на общий параметр: <Product[]>.Это говорит http-методу get get возвращать объект как массив объектов Product, соответствующих определенному выше интерфейсу.

Затем я могу использовать что-то вроде этого:

this.products[0].productName

Или я могу выполнить итерациюэто в моем пользовательском интерфейсе так:

      <tr *ngFor="let product of products">
        <td>
          <a>{{ product.productName }}</a>
        </td>
        <td>{{ product.productCode }}</td>
        <td>{{ product.releaseDate }}</td>
        <td>{{ product.price | currency:"USD":"symbol":"1.2-2" }}</td>
      </tr>

Надеюсь, это поможет.