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

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

我不确定你到底想要什么，我对数据表一无所知。

尝试以下操作，

/* don't know if this is relevant or not */
<ng-template let-vehicle [ngForOf]="value.dallas_list"  pTemplate="rowexpansion">
  <li> {{vehicle.number}}</li>
  <li> {{vehicle.auth}}</li>
</ng-template>

或

在您现有的代码中通过索引号访问元素，

<div class="ui-grid-col-10">{{dallas_list[0].number}}</div>  //added [0]

Answer 2

您没有正确使用 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 并在 html 中打印 list.number 和 list.auth:

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

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

Cannot read property of undefined inside the row expansion

angular

primeng

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

Cannot read property of undefined inside the row expansion

angular

primeng

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