Angular - Итерация не работает (только сначала) - PullRequest
Новая
       16

Angular - Итерация не работает (только сначала)

0 голосов
/ 03 июля 2019

У меня есть массив, и я хочу перебрать все элементы. Проблема проста: ngFor не выполняет итерацию всего массива, а только первый элемент.

Код:

TS 

 alertas: any;

 this.id = this.route.snapshot.paramMap.get("id");
    if (this.id) {
      this.graphCtrl.getMeter(this.id).subscribe(
        response => {;
          this.alertas = response["body"]["alarmasActivas"];
        },
        error => {
          console.log(error);
        }
      );

HTML 

   <ol id="firstLink" class="collapse " *ngFor="let alert of alertas">
        <li>{{alert.id}} ({{alert.fechaInicio |  date:'dd/MM/yyyy HH:mm:ss'}} - {{alert.fechaFin |  date:'dd/MM/yyyy HH:mm:ss'}})</li>
   </ol>

Массив 

body:
alarmasActivas: Array(8)
0: {id: 161, fechaInicio: 1561717685225, fechaFin: null, alarma: null, idDatameter: 6}
1: {id: 162, fechaInicio: 1561717685227, fechaFin: null, alarma: null, idDatameter: 6}
2: {id: 163, fechaInicio: 1561717685229, fechaFin: null, alarma: null, idDatameter: 6}
3: {id: 164, fechaInicio: 1561717685230, fechaFin: null, alarma: null, idDatameter: 6}
4: {id: 165, fechaInicio: 1561717685230, fechaFin: null, alarma: null, idDatameter: 6}
5: {id: 166, fechaInicio: 1561717685231, fechaFin: null, alarma: null, idDatameter: 6}
6: {id: 167, fechaInicio: 1561717685232, fechaFin: null, alarma: null, idDatameter: 6}
7: {id: 168, fechaInicio: 1561717685233, fechaFin: null, alarma: null, idDatameter: 6}
length: 8
__proto__: Array(0)
consumoMedioDiario: "0,000"

JSON.stringfy 

[{"id":161,"fechaInicio":1561717685225,"fechaFin":null,"alarma":null,"idDatameter":6},{"id":162,"fechaInicio":1561717685227,"fechaFin":null,"alarma":null,"idDatameter":6},{"id":163,"fechaInicio":1561717685229,"fechaFin":null,"alarma":null,"idDatameter":6},{"id":164,"fechaInicio":1561717685230,"fechaFin":null,"alarma":null,"idDatameter":6},{"id":165,"fechaInicio":1561717685230,"fechaFin":null,"alarma":null,"idDatameter":6},{"id":166,"fechaInicio":1561717685231,"fechaFin":null,"alarma":null,"idDatameter":6},{"id":167,"fechaInicio":1561717685232,"fechaFin":null,"alarma":null,"idDatameter":6},{"id":168,"fechaInicio":1561717685233,"fechaFin":null,"alarma":null,"idDatameter":6}]

Итак, что же не так в этом коде?

1 Ответ

4 голосов
/ 03 июля 2019

Я думаю, вам нужно использовать *ngFor с <li> вместо <ol>.Ранее вы создавали разные списки для каждого элемента массива.с обновленным кодом у вас будет 1 список для всех элементов массива 

<ol id="firstLink" class="collapse " >
    <li *ngFor="let alert of alertas">
        {{alert.id}} ({{alert.fechaInicio |  date:'dd/MM/yyyy HH:mm:ss'}} - {{alert.fechaFin |  date:'dd/MM/yyyy HH:mm:ss'}})
    </li>
</ol>
...