如何在响应数组中的多个JSON数组上迭代一个属性

Question

我有如下响应数组，来自HTTP Get请求

我想使用*ngFor打印任何对象的所有这些名称属性。这里我在下面尝试了一下，但是没有用。

  <ng-container *ngFor="let index of filteredNames">
              <h4>{{index.name}}</h4>
      </ng-container>

FilteredNames具有对象，如您在控制台拍摄的图像中所见

Answer 1

这取决于您要如何在视图中显示它。

您有一个数组数组。如果要遍历第二个数组中的所有值，则可以：

<div *ngFor="let filteredName of filteredNames">
  <!-- this will show all the values in the second array -->
  <div *ngFor="let value of filteredName">{{ value.name }}</div>
</div>

Answer 2

这里是相同的示例。希望对您有帮助。

我已经在angular中使用js给出了扁平化的示例。

在组件中

filteredNames = [];
    ArrayFromBackResponse = [
        [
          {
            id: 1,
            name: "test",
            hospitalId: 2
          },
          {
            id: 2,
            name: "test2",
            hospitalId: 2
          }
        ],
        [
          {
            id: 9,
            name: "test25",
            hospitalId: 2
          }
        ]
      ];
    constructor() {
        this.filteredNames = [].concat.apply([],this.ArrayFromBackResponse);
     }

以html

<p *ngFor="let o of filteredNames">
  {{o.name}}
</p>

我们还可以使用lodash（_ underscore.js）库来展平数组。

filteredNames = _.flatten(this.ArrayFromBackResponse);

谢谢

kushal