初始化表格组件无法与ngFor一起使用 [英] Primeng the table component isn't working with ngFor
问题描述
我试图循环一个数组,该数组中的每个对象都是html上的表格.它显示如下:
i am trying to loop an array each object in this array is a table on html. and it display like this :
<p-table [value]="section" *ngFor="let section of sections">
<ng-template pTemplate="header">
<tr>
<th>Quantity</th>
<th>Length</th>
<th>m^2</th>
<th></th>
</tr>
<tr>
<th colspan="4">
<div (click)="showDialog()" class="text-left">+ A - Flat Panel RAW MDF Red Gloss
- $95 / sqm
</div>
</th>
<th colspan="8">
<div class="md-inputfield">
<input type="text" class="form-control" pInputText>
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData *ngFor="let piece of rowData.Pieces">
<tr>
<td>
<p-spinner [(ngModel)]="rowData.Quantity"></p-spinner>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData.Length">
</ng-template>
<ng-template pTemplate="output">
{{rowData.Length}}
</ng-template>
</p-cellEditor>
</td>
<td>
{{CalculateTotalArea(rowData)}}
</td>
<td>
<button pButton type="button" icon="fa-close"></button>
</td>
</tr>
</ng-template>
</p-table>
但这给我一个错误 this.value.sort不是一个函数
,这里是数组
but this give me an error this.value.sort is not a function
and here is array
this.pieces = [{数量:2,长度:3,宽度:3,厚度:4}]
this.sections = [{件:this.pieces,文本:"abc"}]
我正在尝试将代码推送到Plunker中,但是我不知道如何将primeng版本升级到"primeng":"^ 5.2.0-rc.1",
然后Plunker是现在不工作任何人都可以帮助我更新primeng库并建议我如何解决此错误.这是Plunker的链接: Plunker
i am trying to push code into Plunker but i don't know how to upgrade version of primeng to "primeng": "^5.2.0-rc.1",
then the Plunker is't working right now
anyone help me update the primeng library and suggest me how to resolve this bug .
here is the link Plunker : Plunker
推荐答案
这是因为,p表希望通过 value
的数组,但是您正在传递 {个数:this.pieces,文本:"abc"}
会导致错误.您必须删除 * ngFor ="section of section"
并像这样传递您的数组< p-table [value] ="sections">
,或者如果您确实希望在页面中包含一堆表,则 sections
数组应类似于以下(多维):
It is because, p-table expects an array through value
however you are passing
{ Pieces: this.pieces, text: "abc" }
which causes the error. Either you have to remove *ngFor="let section of sections"
and pass your array like this
<p-table [value]="sections">
or if you really want to have bunch of tables in your page, your sections
array should be like following (multidimensional):
// for the sake of simplicity, I named your objects as 'item'
this.sections = [
[item1, item2, item3],
[item10, item11, item12],
[item15, item50, item32]
]
这篇关于初始化表格组件无法与ngFor一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!