循环遍历数组并显示数据

Question

I am trying to loop through an array and display that. The problem I've got is that for some reason only the ID is being displayed. I've gone through and debugged and can't understand why this doesn't work. All the data I want to process is available as I've checked through debugging and logging out the array.

Here is the HTML to display:

<div class="col-xs-12 col-md-6 col-md-offset-3">
  <p *ngIf="carsArray.length < 1">No cars are available</p>
  <ul class="list-group" *ngIf="carsArray.length >= 1">
    <li class="list-group-item" *ngFor="let car of carsArray">
      <p>{{ car.id }}</p>
      <p>{{ car.type }}</p>
      <p>{{ car.manufacturer }}</p>
      <p>{{ car.colour }}</p>
    </li>
  </ul>
</div>

Here is my typescript that retrieves said data.

fetchData() {
  this.http
    .get<{ [key: string]: car }>(
      'actual URL goes here'
    )
    .pipe(
      map((ResponseData) => {
        const carsArray: car[] = [];
        for (const key in ResponseData) {
          if (ResponseData.hasOwnProperty(key)) {
            carsArray.push({ ...ResponseData[key], id: key });
          }
        }
        return carsArray;
      })
    )
    .subscribe((post) => {
      this.carsArray = post;
      console.log(this.carsArray);
    });
}

Here is a what I'm currently getting:

Any help would be appreciated as I'm completely stumped!

Answer 1

The solution was to change my model file to have upper case types. The data that was being submitted to the database was in uppercase...

export interface car {
  Manufacturer: string;
  Colour: string;
  Type: string;
  id?: string;
}