angular - "Error trying to diff..."的 ng 容器问题

Question

我使用 Angular4 + PrimeNG。我不需要在我的 html 文件中重复模板，所以我决定使用 ng-container 来这样做。但是，当我使用 ng-container 时出现错误:

Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

如何正确使用带有 *ngFor 子句的 ng-container 来显示嵌套的 dataTable 中的数据？无论如何，我都无法访问这些数据。

这是 JSON 的样子:

{
"status": 0,
"dallases": [{
    "vehicle_id": 17954,
    "dallassettings": "3",
    "dallasupdated": "False",
    "dallas_list": [{
        "number": 666111222,
        "auth": 3
    }, {
        "number": 666777888,
        "auth": 4
    }, {
        "number": 123454321,
        "auth": 4
    }]
}
}

服务

export class VehicleService {
    private defUrl = 'dummy.url';

constructor(private http: Http) { }
getVehicle(username?: string, password?: string) {
    const url = (!username || !password) ? this.defUrl : 'dummy.url' + username + '/' + Md5.hashStr(password);
    return this.http.get(url)
        .map(res => res.json());

组件

export class VehicleComponent implements OnInit {

  cols: any[];

  ngOnInit() {
    this.cols = [
      { field: 'vehicle_id', header: "Vehicle ID" },
      { field: 'dallassettings', header: 'Dallas settings' },
      { field: 'dallasupdated', header: 'Dallas updated' },
      { field: 'dallas_list', header: 'Dallas list' }
    ];

  public vehicles: GeneralVehicle[];

  constructor(private vehicleService: VehicleService, private router: Router) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
    });
  }

interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: string;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

模板

<div *ngIf="vehicles">
  <p-dataTable [value]="vehicles.dallases" expandableRows="true">
    <p-header>List of vehicles: <b>{{currentUser}}</b></p-header>
    <p-column expander="true" styleClass="col-icon"></p-column>
    <p-column field="vehicle_id" header="Vehicle ID" [sortable]="true"></p-column>
    <p-column field="dallassettings" header="Dallas settings" [sortable]="true"></p-column>
    <p-column field="dallasupdated" header="Dallas updated" [sortable]="true"></p-column>
    <ng-template let-vehicle pTemplate="rowexpansion">
      <ng-container *ngFor="let d of vehicles.dallas_list; let i = index; trackBy: trackByFunction">
        <p-dataTable [value]="d">
          <p-column field="number" header="Number" [sortable]="true"></p-column>
          <p-column field="auth" header="Auth" [sortable]="true"></p-column>
        </p-dataTable>
      </ng-container>
    </ng-template>
  </p-dataTable>
</div>

我正在尝试创建一个包含可扩展行的 dataTable，当您扩展该行时，还有另一个 dataTable，因此用户可以管理扩展行内的数据。

一切正常，直到我点击展开 - 此时它返回错误。

谢谢

Answer 1

您的模板存在一些问题，请检查您的 JSON 格式。没有路径如:

vehicles.dallas_list

这里不需要ng-container，直接使用vehicle(指的是中的let-vehicle ng-template) 并在内部 [value] 中使用它来迭代 dallas_list。

所以你的模板应该是这样的:

<div *ngIf="vehicles">
  <p-dataTable [value]="vehicles.dallases" expandableRows="true">
    <p-column expander="true" styleClass="col-icon"></p-column>
    <p-column field="vehicle_id" header="Vehicle ID" [sortable]="true"></p-column>
    <p-column field="dallassettings" header="Dallas settings" [sortable]="true"></p-column>
    <p-column field="dallasupdated" header="Dallas updated" [sortable]="true"></p-column>
    <ng-template let-vehicle pTemplate="rowexpansion">
        <p-dataTable [value]="vehicle.dallas_list">
          <p-column field="number" header="Number" [sortable]="true"></p-column>
          <p-column field="auth" header="Auth" [sortable]="true"></p-column>
        </p-dataTable>         
    </ng-template>
  </p-dataTable>
</div>

Demo