在对象角度6内迭代数组 [英] Iterate array inside object Angular 6

问题描述

我正在使用此方法通过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等。

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

感谢您的帮助。

推荐答案

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

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

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

希望这对您有帮助。

这篇关于在对象角度6内迭代数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！