Question

我正在尝试创建具有角度形式的PrimeNg可编辑表。

app.component.ts（这是最小的可复制代码）

export class AppComponent implements OnInit {
    epForm: FormGroup;
    range: FormArray;

    constructor(private fb: FormBuilder,){
    }
    ngOnInit() {
        this.epForm = new FormGroup({});
        this.epForm.addControl('range', new FormArray([]));
        this.range = <FormArray>this.epForm.get('range');
        this.range.push(
        this.fb.group({
            type: ['X1 Gene']
        })
        );
    }
}

并且html文件是

<form [formGroup]="epForm" novalidate>
    <p-table [value]="epForm.controls.range.value" [rows]="10" [responsive]="true">
        <ng-template pTemplate="header">
            <tr> Range </tr>
        </ng-template>
        <ng-template pTemplate="body" let-i="rowIndex">            
            <tr [formGroupName]='i'>
                <td >
                    <input type="text" pInputText formControlName="type" />
                 </td>
             </tr>
        </ng-template>
      </p-table>
</form>

我尝试使用上面的代码来显示内容，但是我无法编辑Input标签。我打开inspect元素并检查了它，只有tbody是keyon更新的。

我删除了[formgroup]='i'，并在控制台中检查了以下错误

 Cannot find control with path: 'range -> type'

我在<table>上尝试过的同样方法可以正常工作。但是使用p表，我会得到这种行为吗？我该如何解决此问题。

StackBlitz

就像下面的图片一样，我使用[formGroupName]

Answer 1

我从primeNg documentation

中得到了自己的问题的答案。

性能提示

启用选择后，请使用dataKey避免在比较对象时进行深入检查。

使用rowTrackBy避免不必要的dom操作。

对于大型数据集，首选延迟加载。

所以我修改了表

<p-table [value]="epForm.controls.range.value" [rows]="10" [responsive]="true"
[rowTrackBy]="trackByFn">

在组件文件中，添加以下方法

trackByFn(index, row) {
    return index;
}

Answer 2

Use Like this as mentioned in Doc

在https://www.primefaces.org/primeng/#/table/edit

Html 
    <p-table [value]="cars">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Brand</th>
                <th>Color</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData>
            <tr>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.vin">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.vin}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.year" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.year}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <p-dropdown [options]="brands" [(ngModel)]="rowData.brand" [style]="{'width':'100%'}"></p-dropdown>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.brand}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.color">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.color}}
                        </ng-template>
                    </p-cellEditor>
                </td>
            </tr>
        </ng-template>
    </p-table>

    <h3>Row Editing</h3>
    <p-table [value]="cars2" dataKey="vin">
        <ng-template pTemplate="header">
            <tr>
                <th>Vin</th>
                <th>Year</th>
                <th>Brand</th>
                <th>Color</th>
                <th style="width:8em"></th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
            <tr [pEditableRow]="rowData">
                <td>
                    {{rowData.vin}}
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.year" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.year}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <p-dropdown [options]="brands" [(ngModel)]="rowData.brand" [style]="{'width':'100%'}"></p-dropdown>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.brand}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="rowData.color">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.color}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td style="text-align:center">
                    <button *ngIf="!editing" pButton type="button" pInitEditableRow icon="pi pi-pencil" class="ui-button-info" (click)="onRowEditInit(rowData)"></button>
                    <button *ngIf="editing" pButton type="button" pSaveEditableRow icon="pi pi-check" class="ui-button-success" style="margin-right: .5em" (click)="onRowEditSave(rowData)"></button>
                    <button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times" class="ui-button-danger" (click)="onRowEditCancel(rowData, ri)"></button>
                </td>
            </tr>
        </ng-template>
    </p-table>


Component be like .

enter code here

    export class TableEditDemo implements OnInit {

        cars1: Car[];

        cars2: Car[];

        brands: SelectItem[];

        clonedCars: { [s: string]: Car; } = {};

        constructor(private carService: CarService) { }

        ngOnInit() {
            this.carService.getCarsSmall().then(cars => this.cars1 = cars);
            this.carService.getCarsSmall().then(cars => this.cars2 = cars);

            this.brands = [
                {label: 'Audi', value: 'Audi'},
                {label: 'BMW', value: 'BMW'},
                {label: 'Fiat', value: 'Fiat'},
                {label: 'Ford', value: 'Ford'},
                {label: 'Honda', value: 'Honda'},
                {label: 'Jaguar', value: 'Jaguar'},
                {label: 'Mercedes', value: 'Mercedes'},
                {label: 'Renault', value: 'Renault'},
                {label: 'VW', value: 'VW'},
                {label: 'Volvo', value: 'Volvo'`enter code here`}
            ];
        }

        onRowEditInit(car: Car) {
            this.clonedCars[car.vin] = {...car};
        }

        onRowEditSave(car: Car) {
            if (car.year > 0) {
                delete this.clonedCars[car.vin];
                this.messageService.add({severity:'success', summary: 'Success', detail:'Car is updated'});
            }
            else {
                this.messageService.add({severity:'error', summary: 'Error', detail:'Year is required'});
            }
        }

        onRowEditCancel(car: Car, index: number) {
            this.cars2[index] = this.clonedCars[car.vin];
            delete this.clonedCars[car.vin];
        }

    }

如何使用Angular表单创建可编辑的primeNG表？

2 个答案: