时间戳

首页 > 解决方案 > 如何在不使用 ngFor angular 的情况下通过 json 结果

angular - 如何在不使用 ngFor angular 的情况下通过 json 结果

问题描述

我有 JSON 结果，我从后端得到它，它给了我以下结果

[
   {
      "status":"RUN",
      "numberOfTurbines":1
   },
   {
      "status":"ERROR",
      "numberOfTurbines":20
   },
   {
      "status":"STOP",
      "numberOfTurbines":5
   },
   {
      "status":"START_UP",
      "numberOfTurbines":2
   }
]

我有 4 张带有图标的卡片，这些图标指示我的 ts 组件中的每个状态（运行、错误、停止、启动）：

this.service.getAllTurbinesStat().subscribe(s=>{
  this.allStats = s;
});

在我的 html 中：

<div class="row">
<div class="d-flex justify-content-start">
<mat-card class="cards">
   <mat-card-title style="color:red;">RUN</mat-card-title>
</mat-card>
<mat-card  class="cards">
   <span class="material-icons">
     pan_tool
   </span>
   <mat-card-title>ERROR</mat-card-title>
</mat-card>
<mat-card  class="cards ">
   <span class="material-icons">
   build_circle
   </span>
   <mat-card-title>STOP</mat-card-title>
</mat-card>
<mat-card  class="cards">
   <span class="material-icons" >
     arrow_circle_down
   </span>
   <mat-card-title>Start_up</mat-card-title>
</mat-card>

我只想获取各自的数据并放入每张卡中，我该如何实现？*ngFor 我知道通过数据但是我怎样才能获得我想要的字段数据？numberOfTurbines 和 status

标签： angular

解决方案

你为什么不使用*ngFor？

const turbines = [] // your array of JSON objects

<div *ngFor="let turbine of turbines">
  <mat-card>
    <p>Status: {{ turbine.status }} </p>
    <p>Turbines: {{ turbine.numberOfTurbines }}</p>
  </mat-card>
</div>

推荐阅读