Question

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

错误：尝试diff [＃object object]＆＃39;时出错。只允许数组和迭代

如何正确使用ng-container *ngFor子句来显示嵌套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，因此用户可以管理展开行中的数据。< / p>

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

由于

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>。

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

এখানে কিংকর্তব্যবিমূঢ় হবার কোনো সুযোগ নেই

ng-container问题＆＃34;错误尝试差异...＆＃34;

1 个答案:

Demo