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

模板

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

我希望能够为可消耗行中的每一行显示所有number和auth。

Answer 1

您没有正确使用ng-template变量：

ng-template

修改

更改是在let-vehicle内进行的。 let-vehicle="value.dallas_list"是对PrimeNG完成的行迭代中当前项的引用。以前是*ngFor。这是错误的，因为这是对整个列表的引用。如前所述，你只需要一个。

已将<div class="ui-grid ui-grid-responsive ui-grid-pad" *ngFor="let list of vehicle.dallas_list">添加到dallas_list以迭代当前list.number并在html中打印list.auth和<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>：

update t1 set t1.X = 'BLA' from TBL t1 join (select X, Y, row_number() over(order by ID) rnum from TBL) t2 on t1.Y = t2.Y /*since Y is the primary key*/ where t2.rnum between 1 and 3

Answer 2

我不确定你到底想要什么，我对dataTable一无所知。

尝试以下事项，

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

无法读取行扩展内未定义的属性

2 个答案: