我有一个带有动态列的数据表,我想使用带有显示对话框模块的弹出屏幕编辑每一行。 任何人都可以帮我填充Popup表单元素中的选定行数据。
Plunker Url:http://plnkr.co/edit/3H3grih7vHw2BFXBrODO?p=preview
TS:
this.resourceCols = [
{
id: '',
field: 'firstName',
header: 'First Name',
filter: true,
placeHolder: 'Search',
inputModel: '',
inputType: false,
makeColumnEdit: true
}, {
id: '',
field: 'lastName',
header: 'Last Name',
filter: false,
inputModel: '',
inputType: false,
makeColumnEdit: true
}
]
HTML:
<p-dataTable [value]="resources" selectionMode="single" [(selection)]="selectedResource"
[paginator]="true">
<p-column *ngFor="let col of resourceCols" [field]="col.field" [sortable]="true" [filter]="col.filter"
filterPlaceholder="{{col.placeHolder}}" [header]="col.header"></p-column>
<p-footer>
<button pButton type="button" label="Edit" (click)="edit()"></button>
</p-footer>
</p-dataTable>
<p-dialog appendTo="body" header="Resource Details" [(visible)]="resourceDialog"
[responsive]="true" showEffect="fade" [modal]="true">
<form #resourceForm="ngForm" novalidate>
<div class="ui-grid ui-grid-responsive ui-fluid">
<div *ngFor="let col of resourceCols">
<div class="ui-g ui-g-12 ui-g-nopad" *ngIf="col.makeColumnEdit">
<div class="ui-g-12 ui-md-3 ui-label">
<label for="col.field">{{col.header}}</label>
</div>
<div class="ui-g-12 ui-md-9">
<span *ngIf="!col.inputType"> <input pInputText id="col.field" name="col.field" required
[(ngModel)]="col.inputModel"/></span>
</div>
</div>
</div>
</div>
</form>
<p-footer>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
<button type="submit" pButton (click)="save()"
label="Save" [disabled]="!resourceForm.form.valid"></button>
</div>
</p-footer>
</p-dialog>