迭代对象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

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

cv::Mat fillEdge(cv::Mat floated) {
    float currentColor = 255.0;
    cv::Size shape = floated.size();
    int h = shape.height;
    int w = shape.width;

    int count = 1;

    for(int y = 0; y < h; y++) {
        for(int x = 0; x < w; x++) {
            cv:Point2i p = cv:Point2i(x,y);
            floated.at<float>(p) = currentColor;
            //floated.at<float>(y,x) = currentColor; //You could also replace the two lines above with direct indexing (be careful with the order of the axis, as pointed by @Micka in the comments)
        }
    }
    std::cout << floated.channels() << std::endl;
    // prints 1


    std::cout << floated << std::endl;
    return floated;
}

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

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

请注意通用参数： getProducts(): Observable<Product[]> { return this.http.get<Product[]>(this.productsUrl); } 。这是告诉http get方法将对象作为与上面定义的接口匹配的Product对象数组返回。

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

<Product[]>

或者我可以像这样在我的用户界面中对其进行迭代：

this.products[0].productName

希望这会有所帮助。

Answer 2

我建议您定义一个接口，如@DeborahK所示。另外，您可以使用Angular的keyvalue pipe。但是，输出数组将按键排序，因此，如果您的项目对顺序敏感，则不应使用此命令。我强烈建议您不要这样做，因为它过于依赖数据结构，并且如果响应数据结构发生更改，很容易中断。

.parentEl {
    contain: size style;
}