时间戳

首页 > 解决方案 > Angular 材质 mat-tab-group 正在更改 textarea 模糊上的活动选项卡但未触发 selectedIndexChange？

angular - Angular 材质 mat-tab-group 正在更改 textarea 模糊上的活动选项卡但未触发 selectedIndexChange？

问题描述

鉴于组件上的以下内容：

formValues = ['aaa', 'bbb', 'ccc'];
log = (value) => console.log(value);

这个HTML：

<mat-tab-group (selectedIndexChange)="log($event)">
        <mat-tab *ngFor="let formVal of formValues; let indexOuter = index;"
                 label="Button {{indexOuter + 1}}">
            <textarea matInput
                      [value]="formVal"
                      (change)="formValues[indexOuter] = $event.target.value">
            </textarea>
        </mat-tab>
    </mat-tab-group>

将文本添加到第一个选项卡的文本区域，然后第一次更改选项卡时，文本区域文本不会更改，也不会调用日志功能。在更改第一个选项卡的文本区域中的文本并简单地单击文本区域外的任何位置但不单击选项卡标题时进行进一步调查后，选项卡更改为选项卡 2，但日志再次不运行。

由于 selectedIndexChange 显然没有运行索引不会更新，这似乎是我的错误的原因。

任何想法将不胜感激

编辑：看起来是因为通过 ngFor 支持 mat-tab 输出的数据正在被 textarea 更改编辑，这似乎是个坏主意，尽管我不知道为什么会导致这样的问题。

标签： angularangular-material

解决方案

发生这种情况是因为您正在改变*ngFor正在迭代的数组。

您需要将字符串数组更改为对象数组并更改每个对象的属性，因为在这种情况下，数组元素不会更改，更改的是属性并且不会影响*ngFor行为。

这是一个现场示例：https ://stackblitz.com/edit/angular-qhhcpi?file=app%2Ftab-group-basic-example.ts

推荐阅读