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

【问题标题】：edit title (mat-expansion-panel-header) on the go in Angular在 Angular 中随时随地编辑标题（mat-expansion-panel-header）
【发布时间】：2021-08-29 06:58:27
【问题描述】：

我想在现场更改我的标题

这是我现在的形象

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" />

但这不起作用

这是我的 Ts。

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

【问题讨论】：

标签： angular angular8 formarray

【解决方案1】：

我终于找到了解决办法。

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

【讨论】：