Primeng 数据-table 行不显示单元格值
Primeng data-table row does't show cell values
我使用 Primeng 数据-table 显示来自 angular select 的 selected 值。
每当 select 需要在 primeng 数据中显示 selected 值的下拉选项时-table.
这里的问题是我得到的是空行 selected 值:
代码:
<mat-form-field fxFlex="50%">
<mat-label>Select The NAICS Name Or NAICS Code.</mat-label>
<mat-select multiple name="cnae"(selectionChange)="cnaeChangeValue($event)">
<mat-option *ngFor="let cnae of listOfcnae.default.cnaeData"
[value]="cnae">
{{cnae.TextField }}
</mat-option>
</mat-select>
</mat-form-field>
<p-table [columns]="cnaeCols" [value]="selectedCnaeValues" [paginator]="true"[rows]="10">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.filed]}}
</td>
</tr>
</ng-template>
</p-table>
ts code:
ngOnInit() {
this.cnaeCols = [
{ field:"RowNumber", header: "RowNumber"},
{ filed:"TextField", header: "TextField"},
{ field:"ValueField", header: "ValueField"},
]
}
cnaeChangeValue(eventVal) {
this.selectedCnaeValues.push(eventVal.value);
}
And json value:
[
{
"RowNumber": "1",
"TextField": "1011201 - FRIGORÍFICO - ABATE DE BOVINOS",
"ValueField": "168"
}
]
我认为 material 下拉菜单 (selectionChange)="cnaeChangeValue($event)
选择 return 数组中的所有选定项目,并且您正试图推入数组,这就是为什么 table没有显示数据。
cnaeChangeValue(eventVal) {
this.selectedCnaeValues = eventVal.value; // Will work
}
Solution Created on stackblitz
希望这会有所帮助!
我使用 Primeng 数据-table 显示来自 angular select 的 selected 值。
每当 select 需要在 primeng 数据中显示 selected 值的下拉选项时-table.
这里的问题是我得到的是空行 selected 值:
代码:
<mat-form-field fxFlex="50%">
<mat-label>Select The NAICS Name Or NAICS Code.</mat-label>
<mat-select multiple name="cnae"(selectionChange)="cnaeChangeValue($event)">
<mat-option *ngFor="let cnae of listOfcnae.default.cnaeData"
[value]="cnae">
{{cnae.TextField }}
</mat-option>
</mat-select>
</mat-form-field>
<p-table [columns]="cnaeCols" [value]="selectedCnaeValues" [paginator]="true"[rows]="10">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.filed]}}
</td>
</tr>
</ng-template>
</p-table>
ts code:
ngOnInit() {
this.cnaeCols = [
{ field:"RowNumber", header: "RowNumber"},
{ filed:"TextField", header: "TextField"},
{ field:"ValueField", header: "ValueField"},
]
}
cnaeChangeValue(eventVal) {
this.selectedCnaeValues.push(eventVal.value);
}
And json value:
[
{
"RowNumber": "1",
"TextField": "1011201 - FRIGORÍFICO - ABATE DE BOVINOS",
"ValueField": "168"
}
]
我认为 material 下拉菜单 (selectionChange)="cnaeChangeValue($event)
选择 return 数组中的所有选定项目,并且您正试图推入数组,这就是为什么 table没有显示数据。
cnaeChangeValue(eventVal) {
this.selectedCnaeValues = eventVal.value; // Will work
}
Solution Created on stackblitz
希望这会有所帮助!