在Angular 9中解析包含名称值对的Json

Question

我想简单地将每个条目显示为 html 表中的一行，目前我得到以下内容

身份证 编号：1

taskFields:[object Object],[object Object],[object Object]

相反，我希望能够看到隐藏在对象 Object 中的值

我有一个角度模板

<tr *ngFor="let entry of entries | keyvalue">
  <td>{{entry.key}}:{{entry.value}}</td>
</tr>

在我的 component.ts 文件中

ngOnInit():void{
  this.entries = this.testService.getData().pipe((result) =>{
    return result
  }

在我的 testService 我有

getData() : Observable<TestEntry[]>{
return this.httpClient.get<TestEntry[]>(this.baseUrl + '/api/Test'/)
.pipe(
  catchError(error => {throw err;})
   );
}

这会返回以下数据

{"id":1,"testFields":[{"name":"test_id","value":"12345"},{"name":"testCategory", "value":"testAngular"}, {"name":"testUndefined", "value":""}]}

我的测试条目是

export interface TestEntry{
  id:string
  testFields:TestFields
}

我的测试字段是

export interface TestFields{
  name:string
  value:string
}

Answer 1

如果它是一个数组，您需要遍历该值。使用以下内容：

<table>
    <tr *ngFor="let entry of entries | keyvalue">
        <td>{{entry.key}}</td>

        <!-- If value is array iterate over it-->
        <ng-container *ngIf="entry.value && entry.value.length > 0; else obj">
            <td *ngFor="let inner of entry.value">{{inner.name}} : {{inner.value}}</td>
        </ng-container>

        <!-- If value is object display it-->
        <ng-template #obj>
            <td>{{entry.value}}</td>
        </ng-template>
    </tr>
</table>