Angular 角度填充空表列

我是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
        }
    ]

我用这个HTML代码循环使用JSON

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

屏幕上的输出：

我收到的错误消息是：

---

只显示

android

platform answer并通过

function

抓取

ios

platform questions answerValue，或者您可以编写纯管道（性能更高）

---

我通过使用管道修复了该问题：

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

}

---

感谢您的回答，但我得到了以下错误：错误类型错误：无法在Object.eval[as updatenderer]（StatisticsComponent.html:16）的Object.debugupdatenderer[as updatenderer]（core.js:14735）读取未定义的StatisticsComponent.getIphoneValue（statistics.component.ts:21）的属性“answerValue”@jozofe你必须调整变量名，就像这里我用了“不同”来让演示工作起来更容易理解是的，我完全复制了你的代码。但是在getIphoneValue（）函数中，它在answerValue之后表示：“缺少分号”。我使用的是不同版本的angular吗？在回答值后添加分号不确定，出了什么问题。但我相信这和角度无关

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)

<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: '';
}

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

}