Question

我遇到了在mat-table上应用表单数组的问题。我无法使Mat-cells可编辑。

将数组对象直接传递到[datasource]时出现问题。但是我相信它应该作为新的MatTableDataSource实例化。

    <mat-table #table [dataSource]="c.value.contacts" FormArrayName="contacts" >

但是在我的情况下，情况有所不同，我直接从API获取完整的数据收集，并且使用Form数组循环每个收集并绑定到mat-table。因此，在这种情况下，我找不到实例化matdatasource的方法。

我为此创建了stackblitz，但是在这里它可以完美工作而没有任何问题。 https://stackblitz.com/edit/angular-riepzk-xygeob?file=app%2Ftable-basic-example.html

请指导我继续前进。

Answer 1

我们可以通过将“ FormArray ”控件传递给 dataSource ”来实现此目的。

为此，请在“ table-basic-example.ts ”中使用以下代码。

createForm() {
    this.externalPartiesForm = this.fb.group({
      externalParties: this.fb.array([])
    })
}


bindForm() {

    let control = <FormArray>this.externalPartiesForm.get("externalParties");
    this.dataSource.forEach(x => {
        console.log('bind form');
        control.push(this.fb.group({
            id: x.id,
            company: x.companyName,
            contacts: this.fb.array(x.contact.map(i => this.fb.group({
                id: i.id,
                contactName: i.contactName,
                emailId: i.emailId,
                adminAgent: i.adminAgent,
                collateralAgent: i.collateralAgent,
                trusteeAgent: i.trusteeAgent,
            })))
        }))
    });
}

在 dataSource 绑定中，请不要为控件提供以下值。

<mat-table #table [dataSource]='c.get("contacts").controls' formArrayName="contacts" ></mat-table>

“ table-basic-example.html ”的详细代码如下。

<form [formGroup]="externalPartiesForm">
    <div formArrayName="externalParties">
        <div *ngFor="let c of externalPartiesForm.get('externalParties').controls; let i = index;">
            <div [formGroupName]="i">
                <mat-divider></mat-divider>
                <br />
                <br />

                &nbsp;&nbsp;<i>Company Name </i> &nbsp; {{c.value.company}}
                <br />
                <br />
                <pre style="color:red;">{{c.get("contacts").value | json}}</pre>

                <div>
                    &nbsp;&nbsp;<i>Contact Details</i>
                    <mat-table #table [dataSource]='c.get("contacts").controls' formArrayName="contacts">

                        <ng-container matColumnDef="contactName">
                            <mat-header-cell *matHeaderCellDef> Contact Name </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                {{element.value.contactName}}
                            </mat-cell>
                        </ng-container>

                        <!-- Weight Column -->
                        <ng-container matColumnDef="emailId">
                            <mat-header-cell *matHeaderCellDef> Email Id </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                {{element.value.emailId}}

                            </mat-cell>
                        </ng-container>


                        <!-- Complex Column -->
                        <ng-container matColumnDef="adminAgent">
                            <mat-header-cell *matHeaderCellDef> Admin Agent </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                <mat-checkbox formControlName="adminAgent"></mat-checkbox>
                            </mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="collateralAgent">
                            <mat-header-cell *matHeaderCellDef> Collateral Agent </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                <mat-checkbox formControlName="collateralAgent"></mat-checkbox>
                            </mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="trusteeAgent">
                            <mat-header-cell *matHeaderCellDef> Trustee Agent</mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                <mat-checkbox formControlName="trusteeAgent"></mat-checkbox>
                            </mat-cell>
                        </ng-container>

                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                    </mat-table>
                </div>
            </div>
        </div>
    </div>
</form>

作为参考，添加了嵌入式屏幕截图。

以及以下网址中的代码： https://stackblitz.com/edit/angular-riepzk-my4nvn?file=app/table-basic-example.html

Angular-使用Mat表处理表单数组

1 个答案: