Angular - Работа с массивами форм с помощью таблицы Mat

Question

У меня проблема с массивами форм, примененными к мат-таблице.где я не могу сделать свои ячейки матов редактируемыми.

Что-то было при передаче объектов массива напрямую в [источник данных].Но я считаю, что это должно быть создан как новый MatTableDataSource.

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

Но в моем случае все было иначе, я получаю полный сбор данных непосредственно из API, и я использую массивы Form для зацикливания каждого сбора и привязки к mat-table.Поэтому я не смог найти способ создания экземпляра matdatasource в этом случае.

Я создал стекблиц для этого, но здесь он отлично работает без каких-либо проблем.https://stackblitz.com/edit/angular-riepzk-xygeob?file=app%2Ftable-basic-example.html

Пожалуйста, направьте меня, чтобы продолжить.

Answer 1

Мы можем добиться этого, передавая элементы управления FormSray" FormArray ".

, для этого используйте следующий код в таблице ""-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 " ниже.

<code><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}}

Контактная информация Контактное лицо{{}} Element.value.contactNameEmail ID{{}} Element.value.emailIdАгент администрированияАгент обеспеченияПопечитель Агент

Для справки добавлен встроенный снимок экрана.

И код в ссылке ниже: https://stackblitz.com/edit/angular-riepzk-my4nvn?file=app/table-basic-example.html