Угловая заливка пустого столбца таблицы

Question

Я новичок в angular и разбираю JSON в DOM-элементах.

Часть ответа JSON:

"fabricAnswers": [
        {
            "id": 11,
            "answer": "daily active users",
            "answerValue": 7,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 12,
            "answer": "daily new users",
            "answerValue": 1,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 13,
            "answer": "monthly active users",
            "answerValue": 272,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 14,
            "answer": "crash-free users",
            "answerValue": 100,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 15,
            "answer": "sessions",
            "answerValue": 9,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 16,
            "answer": "daily active users",
            "answerValue": 10,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 17,
            "answer": "daily new users",
            "answerValue": 4,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 18,
            "answer": "monthly active users",
            "answerValue": 480,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 19,
            "answer": "crash-free users",
            "answerValue": 100,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 20,
            "answer": "sessions",
            "answerValue": 11,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        }
    ]

И я зацикливаюсь на JSON с этим HTML-кодом;

 <div class="row ">
<div class="col-xs-12 col-sm-3" *ngFor="let statistic of statistic.statistics">
  <div class="block">
    <div class='block-body'> {{ statistic.appName }} </div>
    <table>
      <tr>
        <th>Syncdate</th>
        <th><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Android_robot.svg/2000px-Android_robot.svg.png" alt="" border=3 height=30 width=25></th>
        <th><img src="https://cayland.com/images/ios-logo.png" alt="" border=3 height=30 width=60></th>
      </tr>
      <tr *ngFor="let info of statistic.fabricAnswers">
        <td *ngIf="info.platform == 'android'"> {{info.answer}}</td>
        <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td>
        <td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td>
      </tr>
    </table>
  </div>
</div>

Вывод на экран 1 плитки:

Как вы можете видеть детали iOS приведены ниже. Это происходит потому, что <td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td> пуст при анализе элементов Android. Как я могу заполнить пустой столбец с деталями iOS?

EDIT: Я реализовал то, что сказал Паркар:

Component.HTML:

<div class="row ">
<div class="col-xs-12 col-sm-3" *ngFor="let statistic of statistic.statistics">
  <div class="block">
    <div class='block-body'> {{ statistic.appName }} </div>
    <table>
      <tr>
        <th>Syncdate</th>
        <th><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Android_robot.svg/2000px-Android_robot.svg.png" alt="" border=3 height=30 width=25></th>
        <th><img src="https://cayland.com/images/ios-logo.png" alt="" border=3 height=30 width=60></th>
      </tr>
      <tr *ngFor="let info of statistic.fabricAnswers">
        <td *ngIf="info.platform == 'android'"> {{info.answer}}</td>
        <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td>
        <!--<td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td>-->
        <td>{{getIphoneValue(statistic.fabricAnswers, info)}}</td>
      </tr>
    </table>
  </div>
</div>

component.ts:

export class StatisticsComponent implements OnInit {

constructor(private statistic: HttpclientService) { }

 ngOnInit() {}

 getIphoneValue(list: any[], info: any) {
    return list.find(i =>
    i.answer === info.answer && i.platform === 'ios'
  ).answerValue;
}
}

Вывод на экран:

Сообщение об ошибке, которое я получаю:

ERROR TypeError: Cannot read property 'answerValue' of undefined
at StatisticsComponent.getIphoneValue (statistics.component.ts:18)
at Object.eval [as updateRenderer] (StatisticsComponent.html:16)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
at checkAndUpdateView (core.js:13849)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)

Answer 1

Я исправил проблему с помощью трубы:

export class IospipePipe implements PipeTransform {
transform(value: any[], info: any): any {
for (const i of value) {
  if (i.answer === info.answer && i.platform === 'ios') {
    return i.answerValue;
  }
}
return null;
}

}

Answer 2

Показывать только android ответ платформы и захватывать ios вопросы о платформе answerValue через function или, возможно, вы можете написать Pure Pipe (более производительный).

<ng-container *ngFor="let info of fabricAnswers">
    <tr *ngIf="info.platform == 'android'">
        <td *ngIf="info.platform == 'android'"> {{info.answer}}</td>
        <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td>
        <td>{{getIphoneValue(fabricAnswers, info)}}</td>
    </tr>
</ng-container>

Код

getIphoneValue(list: any[],info: any) {
   var iosItem = list
     .find(i => 
        i.answer == info.answer && i.platform === 'ios'
     );
    return iosItem ? iosItem.answerValue: '';
}

Демонстрация Stackblitz