如何使用NGFOR访问HTML文件中一个大对象中的多个对象的值？

Question

在Angular中，我试图在HTML文件中使用*NGFOR来访问嵌套对象值。对象serverdata我尝试访问的是遵循。

{//whole object i try to loop through and access
  "0": {//inner , nested object that store the data I want to access 
    "District_en": "Sha Tin",
    "Name_en": "This will be the new name",
    "Address_en": "Kwei Tei Street, Fo Tan, Sha Tin",
    "Facilities_en": "2 barbecue pits",
  },
  "1": {
    "District_en": "Sha Tin",
    "Name_en": "Lok Shun Path Barbecue Area",
    "Address_en": "Lok Shun Path, Sha Tin",
    "Facilities_en": "6 barbecue pits",
  }
}

我试图在每个“索引”对象中专门打印出每个属性。
在HTML中使用以下代码。像循环整个对象并打印出每个属性值。

 <tr *ngFor="let index of serverData |  keyvalue ">
     <td>{{index.value.District_en}}</td>
     <td>{{index.value.Name_en}}</td>
     <td>{{index.value.Address_en}}</td>
     <td>{{index.value.Facilities_en}}</td>
 </tr>

但是错误对象是类型“未知”出现的。
我发现类似的问题，但大多数是关于访问多个对象的问题。
当我的大脑变成一个单个对象内的多个对象的情况时，我的大脑停止工作...
提前致谢。

Answer 1

你可以像下面这样做。

app.component.ts

import { Component, OnInit } from '@angular/core';

interface ServerData {
  District_en: string;
  Name_en: string;
  Address_en: string;
  Facilities_en: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  serverData: Record<string, ServerData>;

  ngOnInit() {
    this.serverData = {
      //whole object i try to loop through and access
      '0': {
        //inner , nested object that store the data I want to access
        District_en: 'Sha Tin',
        Name_en: 'This will be the new name',
        Address_en: 'Kwei Tei Street, Fo Tan, Sha Tin',
        Facilities_en: '2 barbecue pits',
      },
      '1': {
        District_en: 'Sha Tin',
        Name_en: 'Lok Shun Path Barbecue Area',
        Address_en: 'Lok Shun Path, Sha Tin',
        Facilities_en: '6 barbecue pits',
      },
    };
  }
}

app.component.html

<tr *ngFor="let index of serverData | keyvalue">
  <td>{{ index.value.District_en }}</td>
  <td>{{ index.value.Name_en }}</td>
  <td>{{ index.value.Address_en }}</td>
  <td>{{ index.value.Facilities_en }}</td>
</tr>

它在 UI 上正确呈现

工作演示

如果您有任何疑问，请告诉我。

注意：更新了 ts 代码