如何在视图中仅循环一次对象（单个 *ngFor）？

Question

我有这个对象，每个属性都有一个数组作为它的值。我想只循环一次这个对象，而不是使用 2 个 *ngFor 指令，因为它会导致我的应用程序运行缓慢。我也愿意用这个对象创建一个数组，但我仍然想为每个部分添加一个部分 id，如下例所示。谁能指出我正确的方向？提前非常感谢！这是我的代码。

LIVE DEMO

<div *ngFor="let group of dataObject | keyvalue">
    {{group.key}}
    <div *ngFor="let item of group.value; let i=index;">
        {{item.name}}
    </div>
</div>

注意：我的最终目标是将每个人包装到他们所属的部分中，并为每个部分添加一个 ID。 示例：

  <div id = "parentId"> 
     <div id = "section-a">
        list of all users that belong in section a
     </div>
     <div id = "section-b">
         list of all users that belong in section b
     </div>
     <div id = "section-c">
         list of all users that belong in section c
     </div>
 
    <div>
    ......
    ......
  </div>

Answer 1

使用*ngFor 无法做到这一点。您可以在组件中准备数据的平面版本，并提供一个 1-depth 数组以仅循环一次。

示例应用组件：

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  
  dataObject = {
    A: [
      { id: 1, name: "Mike", lastname: "asmith" },
      { id: 2, name: "Mary", lastname: "alters" },
      { id: 3, name: "Boris", lastname: "al" }
    ],
    B: [
      { id: 1, name: "Mike", lastname: "bmith" },
      { id: 2, name: "Mary", lastname: "balters" },
      { id: 3, name: "Boris", lastname: "bl" }
    ],
    C: [
      { id: 1, name: "Mike", lastname: "cmith" },
      { id: 2, name: "Mary", lastname: "calters" },
      { id: 3, name: "Boris", lastname: "dl" }
    ],
    D: [
      { id: 1, name: "Mike", lastname: "dmith" },
      { id: 2, name: "Mary", lastname: "dalters" },
      { id: 3, name: "Boris", lastname: "dl" }
    ],
    E: [
      { id: 1, name: "Mike", lastname: "emith" },
      { id: 2, name: "Mary", lastname: "ealters" },
      { id: 3, name: "Boris", lastname: "el" }
    ]
  };

  flatDataObject = [];

  constructor() {
    // Loop through dataObject
    Object.keys(this.dataObject).forEach(k => {
      // Assign key as a `key` attribute to first object in array.
      this.dataObject[k][0].key = k;
      // Push the arrays into one
      this.flatDataObject.push(...this.dataObject[k]);
    });
  }
}

示例 HTML：

<div *ngFor="let group of flatDataObject">
  <!-- Check if the object has `key` attribute -->
  <div *ngIf="group.key">
    <!-- If it has `key` attribute: -->
    {{group.key}}
  </div>
  <div>
    {{group.lastname}}
  </div>
</div>

这里是演示：https://stackblitz.com/edit/angular-6-template-sk8tkm?file=src/app/app.component.html

这是我能想到的最佳解决方案。它仍然总共有两个循环，但至少其中一个没有使用*ngFor。