如何在Angular 6+中使用插值显示json字符串的属性？

Question

假设我们有一个像这样的JSON对象的列表：

data = {
   id: 1,
   someObjAsString: '{"p1":"a", "p2": "b"}',
   ...
   ... other properties
}

使用* ngFor我想从someObjAsString显示p2：

<div *ngFor="let data of dataList">
{{data.someObjAsString.p2}} <!-- What should I do here to display p2 property of someObjAsString-->
</div

JSON.parse（）绝对无法正常工作

任何帮助将不胜感激。

Answer 1

由于someObjAsString是对象，因此可以使用keyvalue管道：

<div *ngFor="let item of dataList.someObjAsString | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

通常ngFor用于遍历数组。

更新：

<div *ngFor="let item of dataList | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
    <ng-container *ngIf="item.key == 'someObjAsString'">
        <div *ngFor="let someObj of item | keyvalue">
            someObj Key: <b>{{someObj.key}}</b> 
              and someObjValue: <b>{{someObj.value}}</b>
        </div>
    </ng-container>
</div>