行の展開内で未定義のプロパティを読み取ることができません

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

Iが消耗列内の行のそれぞれのすべてのnumber sおよびauth Sを表示することができるように期待してい

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

テンプレート。

Answer 1

：

<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"でした。これはリスト全体を参照していたので間違っていました。以前のように1つだけ必要です。 *ngForより

は、HTML内の現在のdallas_listと印刷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 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について何も知らないです。あなたは正しくNG-テンプレート変数を使用していない

てみてください以下のもの、

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