Angular2 - PrimeNG dataTable行擴展不擴展

我有PrimeNG的DataTable問題。在我之前的問題中，有人鼓勵我使用rowexpansion作爲我的表 - 我檢查了這一點，它完全符合我的應用程序概念。但是，我無法使其正常工作 - 我無法展開該行。我在模板中嘗試了許多概念，但沒有任何幫助。Angular2 - PrimeNG dataTable行擴展不擴展

我想問題在於<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中。

來源

2017-04-07 Haseoh

您使用angular2或angular4？ – RemyaJ

我最近更改了angular4（'ng-template'而不是'template'），但是我使用了angular2的備份。 – Haseoh

是否因爲字體消耗行而不是expandableRows？ – RemyaJ

使用

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

來源

2017-04-07 06:11:45 RemyaJ

Angular2 - PrimeNG dataTable行擴展不擴展

回答

相關問題