迭代对象Angular 6内的数组答案

【问题标题】：Iterate array inside object Angular 6迭代对象Angular 6内的数组
【发布时间】：2019-04-19 04:05:09
【问题描述】：

我通过 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等等。

如何迭代来获取数组的属性？

感谢您的帮助。

【问题讨论】：

标签： arrays angular javascript-objects

【解决方案1】：

一种简单的方法是定义一个描述数组元素布局的接口。例如，我的产品数组有一个这样的界面：

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

Angular 的 http get 方法会自动将传入的 API 数组映射到这些对象的数组中：

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

注意泛型参数：<Product[]>。这是告诉 http get 方法将对象作为与上面定义的接口匹配的 Product 对象数组返回。

然后我可以使用这样的东西：

this.products[0].productName

或者我可以像这样在我的 UI 中迭代它：

      <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>

希望这会有所帮助。

【讨论】：

感谢该解决方案，有一个类似的问题，现在因为我必须在组件端使用它，我如何动态使用这里提供的解决方案 this.products[0].productName 因为我有显示所有结果，而不考虑数组编号。

【解决方案2】：

我建议你定义一个接口，正如@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>

【讨论】：