Question

我对PrimeNG的DataTable有疑问。在我之前的问题中，有人鼓励我使用rowexpansion作为我的桌子 - 我检查了它，它完全符合我的app概念。但是，我无法使其正常工作 - 我无法扩展行。我在模板中尝试了很多概念，但没有任何帮助。

我认为问题出在<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">

Angular2 - PrimeNG dataTable rowexpansion不会扩展

1 个答案: