angular - 无法读取行扩展内未定义的属性

Question

在我写这个问题之前，我检查了大多数与我类似的案例，但没有成功。我正在尝试在可扩展行内显示 number 和 auth - 我正在使用 PrimeNG。无论我尝试什么，都没有效果。由于我已经没有能力解决这个问题了，所以我需要你的帮助。

简化代码:

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="value.dallas_list" pTemplate="rowexpansion"> <!-- the problem is here -->
            <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
                <div class="ui-grid-row">
                    <div class="ui-grid-col-9">
                        <div class="ui-grid ui-grid-responsive ui-grid-pad">
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-2 label">Number: </div>
                                <div class="ui-grid-col-10">{{dallas_list.number}}</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-2 label">Auth: </div>
                                <div class="ui-grid-col-10">{{dallas_list.auth}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-dataTable>
</div>

我希望能够显示可消耗行内每一行的所有 number 和 auth。

Answer 1

您没有正确使用 ng-template 变量:

 <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"> <!-- the problem is here -->
            <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
                <div class="ui-grid-row">
                    <div class="ui-grid-col-9">
                        <div class="ui-grid ui-grid-responsive ui-grid-pad" *ngFor="let list of vehicle.dallas_list">
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-2 label">Number: </div>
                                <div class="ui-grid-col-10">{{list.number}}</div>
                            </div>
                            <div class="ui-grid-row">
                                <div class="ui-grid-col-2 label">Auth: </div>
                                <div class="ui-grid-col-10">{{list.auth}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-dataTable>

编辑

更改在 ng-template 内进行。 let-vehicle是对 PrimeNG 完成的行迭代中当前项的引用。 以前是let-vehicle="value.dallas_list" 。这是错误的，因为这是对整个列表的引用。正如之前所说，您只需要一个。

比*ngFor已添加到<div class="ui-grid ui-grid-responsive ui-grid-pad" *ngFor="let list of vehicle.dallas_list">迭代当前dallas_list并打印list.number和list.auth html 内:

<div class="ui-grid ui-grid-responsive ui-grid-pad" *ngFor="let list of vehicle.dallas_list">
 <div class="ui-grid-row">
        <div class="ui-grid-col-2 label">Number: </div>
        <div class="ui-grid-col-10">{{list.number}}</div>
    </div>
    <div class="ui-grid-row">
        <div class="ui-grid-col-2 label">Auth: </div>
        <div class="ui-grid-col-10">{{list.auth}}</div>
    </div>
</div>