angular - ngFor 与数组数组成角度

Question

1. 项目清单：

jsonObject = [
    {
      place: 'place1',
      fatherDetails: [
        {name: 'place1_father1', adharId: 134567},
        {name: 'place1_father2', adharId: 124567},
      ],
      motherDetails: [
        {name: 'place1_mother1', adharId: 123456},
        {name: 'place1_mother2', adharId: 123457},
        {name: 'place1_mother3', adharId: 123467},
      ],
    },
    {
      place: 'place2',
      fatherDetails: [
        {name: 'place2_father1', adharId: 123567},
        {name: 'place2_father2', adharId: 12567},
      ],
      motherDetails: [
        {name: 'place2_mother1', adharId: 1234567},
        {name: 'place2_mother2', adharId: 1234567},
        {name: 'place2_mother3', adharId: 1234567},
      ],
    }
  ];

如何fatherDetails使用 ngFor 循环 HTML 中的所有对象？基本上，我需要这样的东西：

<mat-option *ngFor = "let father of jsonObject">
   {{father.name}}
</mat-option>

但是，这行不通。因为，它必须循​​环两次。

标签： angulartypescript

Answer 1

注意您需要迭代第一个循环，第二个循环将在第一个循环的对象数组中进行迭代。

jsonObject = [{
    place: 'place1',
    fatherDetails: [{
        name: 'place1_father1',
        adharId: 134567
      },
      {
        name: 'place1_father2',
        adharId: 124567
      },
    ],
    motherDetails: [{
        name: 'place1_mother1',
        adharId: 123456
      },
      {
        name: 'place1_mother2',
        adharId: 123457
      },
      {
        name: 'place1_mother3',
        adharId: 123467
      },
    ],
  },
  {
    place: 'place2',
    fatherDetails: [{
        name: 'place2_father1',
        adharId: 123567
      },
      {
        name: 'place2_father2',
        adharId: 12567
      },
    ],
    motherDetails: [{
        name: 'place2_mother1',
        adharId: 1234567
      },
      {
        name: 'place2_mother2',
        adharId: 1234567
      },
      {
        name: 'place2_mother3',
        adharId: 1234567
      },
    ],
  }
];

<tr *ngFor="let object of jsonObject;let i = index;">
  <td>{{i}}</td>
  <td * ngFor="let o of object.motherDetails">{{o}}</td>
</tr>