0

我有一个带有动态列的数据表，我想用带有显示对话框模块的弹出屏幕编辑每一行。任何人都可以帮助我在弹出表单元素中填充选定的行数据。

Plunker 网址： 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>
4

0 回答 0