如何在對象數組的模板屬性中顯示

Question

我只是嘗試在模板中顯示屬性的值。 但目前什么都沒有顯示。

所以這是組件：

export class ServerStatusComponent implements OnInit {
  snovieCollection: SnovietatusDto = {};

  constructor(private snovierStatus: snovieStatusService) {}

  ngOnInit(): void {
    this.sensorStatus
      .getSensorStatuses()
      .pipe(
        map((data) => {
        console.log(data.cameraSensors);
        })
      )
      .subscribe((status) => {      
      });
  }
}

這是模板：

<p>Camera sensoren</p>
  <tr *ngFor="let camera of snovieStatusCollection.key|keyvalue">

    test
     <h3> {{camera | json}}</h3>

  </tr>

所以我只想在模板中顯示鍵的值。 console.log 返回：

0: {key: "T", latestTimestamp: "2021-03-12T10:09:00Z"}

所以我沒有得到任何錯誤。 但也沒有顯示任何內容。

Answer 1

兩件事情：

1. 您沒有從map返回任何東西。 所以undefined將被發送到訂閱。 使用tap來代替副作用。
2. 您沒有在訂閱中將響應分配給this.sensorStatusCollection 。

export class ServerStatusComponent implements OnInit {
  sensorStatusCollection: SensorStatusDto = {};

  constructor(private sensorStatus: SensorStatusService) {}

  ngOnInit(): void {
    this.sensorStatus
      .getSensorStatuses()
      .pipe(
        tap((data) => {                         // <-- `tap` here
          console.log(data.cameraSensors);
        })
      )
      .subscribe((status) => {      
        this.sensorStatusCollection = status;   // <-- assign here
      });
  }
}

更新：類型

3. 正如@TotallyNewb 在評論中指出的那樣， this.sensorStatusCollection 的類型需要是this.sensorStatusCollection類型的SensorStatusDto

export class ServerStatusComponent implements OnInit {
  sensorStatusCollection: SensorStatusDto[] = [];

  ...
}