Блог

Главная - Вопросы по программированию - как просмотреть результат json без использования ngFor angular

как просмотреть результат json без использования ngFor angular

#angular

#angular

Вопрос:

У меня есть результат JSON, который я получаю из серверной части, он дает мне следующий результат

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

У меня есть 4 карточки со значками, которые указывают на каждый статус (запуск, ошибка, ОСТАНОВКА, Start_up) в моем компоненте 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

Комментарии:

1. если вы уверены, что получите только эти данные. затем отсортируйте ваш результат по статусу (не обязательно) и покажите данные с индексацией. например. this.AllStats[0].статус вернет RUN и this.AllStats[0].numberOfTurbines вернет 1.

2. @HPSingh тогда мне не нужен ngFor?

3. Да, вам не нужен ngFor. Вы получите данные из массива «this.AllStats» по индексу.

4. ответ @SamScholefield выглядит правильным.

Ответ №1:

Почему бы вам не использовать *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>