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

Question

我只想将每个条目显示为 html table 中的一行，目前我得到以下内容

编号 id:1

taskFields:[object 对象],[object 对象],[object 对象]

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

中的值

我有一个angular模板

<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
  }

在我的测试服务中我有

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

这个returns下面的数据

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

我的 TestEntry 是

export interface TestEntry{
  id:string
  testFields: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>

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

Parsing Json that contains name value pairs in Angular 9

arrays

angular

typescript

ngfor