Разобрать содержимое json для ключа перед использованием в шаблоне angular 6

Question

Я использую Angular 6.

У меня есть объект массива в файле компонента.

items: Array<ItemData>;

ItemData интерфейс имеет следующий контент

export interface FavouriteProductData {
  id: number;
  type: string;
  content: string;
}

и content содержит данные в формате json_encoded

'{"name":"Jonathan Suh","gender":"male"}';

В шаблоне я зацикливаюсь на items и хочу напечатать name поле содержимого.

<tr *ngFor="let i in items; id = index;">
  <td> {{ i.type }} </td>
  <td> {{ i.content.name }} </td>
</tr>

Но так как content закодирован json. Я не могу напечатать его содержимое в шаблоне.

Как можно проанализировать содержимое JSON в шаблоне и сохранить проанализированное содержимое в новой переменной?

Я пытался создать метод в компоненте

jsonDecode(item) {
  return JSON.parse(item.content);
}

и использовать в шаблоне как

<tr *ngFor="let i in items; id = index; p = jsonDecode(i)">
  <td> {{ i.type }} </td>
  <td> {{ p.name }} </td>
</tr>

Но это не работает.

Answer 1

Ваш первый подход работает отлично образец в Stackblitz

Я сделал небольшие изменения в объявлении массива varable.

Компонент:

items : any =[];
name = 'Angular';
constructor(){
   this.items = [{id :'1', type :'spec' , content : '{"name":"Jonathan Suh","gender":"male"}'}];
}

extractNameFromJson(obj){
  obj = JSON.parse(obj);
  return obj.name;
}

HTML:

<tr *ngFor="let i of items;">
   <td> {{ i.type }} </td> 
   <td> {{ extractNameFromJson(i.content) }} </td>
</tr>

Работает как положено, попробуйте это.