无法读取行扩展中的undefined属性

Question

Befote我写了这个问题我检查了大多数类似的案例我的，但没有成功。我试图在可展开的行内显示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 S和auth S代表每个消耗行内行。

Answer 1

你没有正确使用NG-模板变量：

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

Answer 2

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

尝试下面的东西，

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

OR

在现有的代码访问它的索引号元素

，

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