Angular2 - PrimeNG dataTable rowexpansionが展開されない

Question

PrimeNGのDataTableに問題があります。私の以前の質問で誰かが私のテーブルにrowexpansionを使用するよう奨励しました - これをチェックし、それは私のアプリのコンセプトに完全に合っています。しかし、私は正常に動作させることはできません - 私は行を展開することはできません。私はテンプレート内で数多くのコンセプトを試しましたが、何も助けませんでした。

問題が<ng-template let-vehicles pTemplate="rowexpansion">行内にあると思われますが、間違っている可能性があります。

簡体コード：

vehicle.component.ts

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

vehicle.service.ts

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" expendableRows="true"> 
     <p-header>List of vehicles</p-header> 
     <p-column expander="true" styleClass="col-icon"></p-column> 
     <!--<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></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> 
     <p-column field="dallas_list" header="Dallas list" [sortable]="true"></p-column> 
     <ng-template let-vehicles pTemplate="rowexpansion"> 
      <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">{{vehicles.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">{{vehicles.dallas_list.auth}}</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </ng-template> 
    </p-dataTable> 
</div> 

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

私は<p-column expander="true" styleClass="col-icon"></p-column>は、特定の車両の番号とauthsのを拡張し、表示するように期待しています。

Answer 1

使用

<p-dataTable [value]="vehicles.dallases" expandableRows="true">