Как показать свойство строки json, используя интерполяцию в Angular 6+?

Question

Допустим, у нас есть список JSON объекта, подобного этому:

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

Использование * ngДля того, чтобы показать p2 из someObjAsString:

<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 является объектом, то вы можете использовать значение ключа pipe:

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

Обычно ngFor используется для перебора массивов.

ОБНОВЛЕНИЕ:

Поскольку ваш объект хранится в виде строки, мы можем использовать json .parse () для создания значения или объекта JavaScript:

data = {
  id: 1,
  someObjAsString: '{"p1":"a", "p2": "b"}',
  anotherObj: '{"p1":"a", "p2": "b"}'
};


ngOnInit(){
    for (const key in this.data) {
        if (this.data.hasOwnProperty(key)) {
             this.data[key] = JSON.parse(this.data[key]);
        }
     }
     console.log(this.data);
}

И HTML:

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

    <div *ngFor="let someObj of item | keyvalue">
        someObj Key: <b>{{someObj.key}}</b> 
          and someObjValue: <b>{{someObj.value | json}}</b>
    </div>
</div>

Полный пример рабочего стека можно посмотреть здесь.