angular - 在 Angular 中随时随地编辑标题（mat-expansion-panel-header）

Question

我想在现场更改我的标题

这是我当前的图像看起来像

HTML 代码

    <ng-container *ngFor="let group of formData.groups">
        <!-- Panels-->
        <mat-accordion>
            <mat-expansion-panel cdkDrag>
                <mat-expansion-panel-header>
                    {{group.formGroupName}}
                </mat-expansion-panel-header>
        
        </mat-accordion>
    </ng-container>

我尝试添加如下输入，以便在应用程序上线时修改面板文本

<input type="text" [(ngModel)]="group.formGroupName" class="editable" />

但这不起作用

这是我的T。

    formData: Form = {
        formGroupName: 'form',
          groups: [
            {
                formGroupName: 'personalDetails',
                fields: [
                {
                 formControlName: 'firstName',
                  type: 'Text',
                  required: false,
                  label:'FirstName',
                  locked: true
                }
               ]
              },
              {
                formGroupName: 'contactDetails',
                 fields: [
                  {
                    formControlName: 'address1',
                    type: 'Text',
                    required: false,
                    label:'Address 1',
                    locked: true
                  }
               ]
             }
            ]

标签： angularangular8formarray

Answer 1

最后我得到了解决方案。

<input type="text" [(ngModel)]="group.formGroupName" [value]="group.formGroupName" class="editable" />