Angular2 - PrimeNG dataTable 행 확장이 확장되지 않습니다.

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> 확장하고 표시 번호 및 특정 차량에 한해 승인 할 전망이다.

Answer 1

사용

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