【问题标题】:Primeng data-table row does't show cell valuesPrimeng 数据表行不显示单元格值
【发布时间】:2019-02-08 08:47:28
【问题描述】:

我使用 Primeng 数据表来显示从角度选择中选择的值。

每当在下拉列表中选择需要在primeng数据表中显示所选值的选项时。

这里的问题是我得到的是空行而不是选定的值:

代码:

 <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"
}
]

【问题讨论】:

  • 请您为此创建 stackblitz 以更快地提供解决方案
  • 对不起,我的机器有问题 stackblitz 结果部分。结果不是我的机器上的显示,我尝试了很多次
  • {{rowData[col.filed]}} { 归档:“TextField”,标题:“TextField”},-应该有“字段”而不是“归档”
  • @porgo,哎呀,但没有解决仍然有空行

标签: angular primeng-datatable


【解决方案1】:

我认为选择时的材料下拉列表(selectionChange)="cnaeChangeValue($event) 会返回数组中的所有选定项,并且您正在尝试将数组推送到数组中,这就是表格未显示数据的原因。

cnaeChangeValue(eventVal) {
    this.selectedCnaeValues = eventVal.value; // Will work
  }

Solution Created on stackblitz

希望这会有所帮助!

【讨论】:

  • 如果我直接分配 json 值是正确的。我需要根据角度多选选项显示。我在角度多选中选择 4option 意味着应该在 primng 数据表中显示四个值。我需要从批量 JSON 值中显示特定值。
  • 在数组中使用扩展运算符刷新数据后,我遇到了您的问题 - this.selectedCnaeValues = [...this.selectedCnaeValues];
  • 我添加了 Json 值,但表中只显示了一个值
  • 为什么不直接这样赋值 this.selectedCnaeValues = eventVal.value;
  • 我有数组值,我需要从 json 值中显示那些选定的值并推送空 this.selectedCnaeValues 数组
猜你喜欢
  • 2018-05-19
  • 1970-01-01
  • 2017-06-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-07
  • 2012-07-15
相关资源
最近更新 更多