角度 - 迭代不起作用(只先拿)

Question

我有一个数组，我想迭代所有元素。问题很简单：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>

array

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

那么，此代码中有什么问题？

Answer 1

我认为您需要将*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>