Json 数据显示在网页上但未落入表格列

Question

我将如何 go 让每个车辆属性落入各自的列？

<tbody>
    <tr *ngFor="let vehicle of vehicles ">
        <td><pre>{{vehicle | json }}</pre></td>
        <td>{{vehicle.DecodedVehicleLeafId | json}}</td>
        <td>{{vehicle.Description | json}}</td>
        <td>{{vehicle.IsSummarizedData | json}}</td>
        <td>{{vehicle.IsActive | json}}</td>
        <td>{{vehicle.SourceBrandCode | json}}</td>
        <td>{{vehicle.Attribute1 | json}}</td>  
        <td><a [routerLink]="['/vehicles','edit', vehicle.VehicleCatalogId]">View</a></td>
    </tr>
</tbody>

export interface Vehicle { 
    VehicleCatalogId?: string;
    DecodedVehicleLeafId?: string;
    Description?: string;
    IsSummarizedData?: boolean;
    IsActive?: boolean;
    SourceBrandCode?: string;
    VehicleYear?: string;
    Attribute1?: string;
}

ngOnInit(): void { 
    this.vehiclesService.getAllVehicles()
    .subscribe({
      next: (vehicles) => {
        console.log(vehicles)
        this.vehicles = vehicles;
      },
      error: (response) => {
        console.log(response);
      }
    });
}

getAllVehicles(): Observable<Vehicle[]>{return this.http.get<Vehicle[]>(this.baseApiUrl + '/api/ingress');}

网页

Answer 1

Json pipe

你不应该用 json pipe pipe 一切。 这只是为了帮助您了解 object 中的内容。

例子

这是Stackblitz的一个非常基本的示例。 因此，我认为您最初填充表格的方法没有任何问题。

可能的问题

您需要确保Vehicle接口 map 中的键与端点返回的对象完全一致。 它们区分大小写，所以您确定它们以大写字母开头吗？

我注意到您将所有接口成员定义为可选的? （=猫王）。 如果它们不是可选的（就像我假设 id 不是这样的东西），它们不应该被标记为这样。