angular - 使用循环显示数组的对象

Question

我有一个名为的数组addresses，其中包含多个对象（即多个地址）。

[
 {
   "name": "Jhon Doe",
   "gender": "Male",
   "addresses": [
        {
            "addressType": "Home",
            "city": "Portland",
            "country": "United States",
            "postalCode": "97286",
            "state": "Oregon",
            "street": "86807 Twin Pines Way"
        },
        {
            "addressType": "Office",
            "city": "Phoenix",
            "country": "United States",
            "postalCode": "85083",
            "state": "Arizona",
            "street": "0583 Dayton Junction"
        }
    ]
 },
  .
  .
  .
  .
  .
  .
  .
  .
 {
   "name": "Mark Wood",
   "gender": "Male",
   "addresses": [
      {
         "addressType": "Home",
          "city": "Minneapolis",
          "country": "United States",
          "postalCode": "55417",
          "state": "Minnesota",
          "street": "0 School Way"
      },
      {
          "addressType": "Office",
          "city": "Tuscaloosa",
          "country": "United States",
          "postalCode": "35487",
          "state": "Alabama",
           "street": "98 Vernon Place"
      },
      {
          "addressType": "Others",
           "city": "Sacramento",
           "country": "United States",
           "postalCode": "95833",
           "state": "California",
           "street": "40581 Superior Pass"
         }
      ]
    }

  ]

参考图片：

我想根据存在的对象数量（即地址的编号/类型）显示所有地址。

我可以使用对象索引位置显示多个地址，但我想通过循环显示。

Stackblitz演示

标签： angulartypescriptangular6

Answer 1

您可以遍历地址：

<td *ngFor="let abc of contact.addresses">
    {{abc.addressType}} 
</td>