Angular ng集装箱问题，带有“不合格”字样；尝试区分时出错…”；

我使用Angular4+素描。我不需要在html文件中重复模板，所以我决定使用

ng container

。但是，当我使用

ng container

时，我得到一个错误：

错误：尝试区分“[object]”时出错。只允许使用数组和iterables

如何正确使用

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());

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

组件

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;
}

模板

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());

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

车辆列表：{currentUser}

我试图创建一个带有可展开行的

数据表

，当您展开行时，会有另一个

数据表

，这样用户可以管理展开行中的数据

在我点击expansion之前，一切都很正常——此时它返回一个错误

---

谢谢

您的模板中有一些问题，请检查JSON的外观。不存在以下路径：

vehicles.dallas_list

此处不需要

ng容器

，只需使用

车辆

（指

ng模板

中的

让车辆

），并在内部

[value]

中使用该容器，以迭代

达拉斯列表

因此，您的模板应如下所示：

---

我不认为问题是因为

ng容器

。什么是

车辆。达拉斯列表

？你可以创建一个plunker吗？@Maximus我编辑了添加问题的服务和组件<代码>车辆。达拉斯列表是JSON中的一个字段，

达拉斯列表

包含

编号

和

身份验证

字段，我想将这些字段放在可展开行中。我没有看到您引用的

JSON

中的

车辆。达拉斯列表

。我更新了我的代码，现在它没有返回错误，当我展开行时，它只是一个空白。我需要一个plunker，没有itI的帮助我做了更正，这就是它现在的样子：-有时找不到记录，有时是空的，小行请将代码和json数据插入plunker，我来看看：）-added vehicles.json文件。我为测试用户复制了整个输出。更新了答案和plunker。现在似乎很好：）哈哈，好吧，别夸张了，我没那么好：D:D但很高兴我们解决了这个问题！祝你有美好的一天和快乐的编码！：）