Question

在组件上提供以下内容：

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更改进行编辑，这似乎是个坏主意，尽管我不知道为什么会引起这种问题。

Answer 1

之所以会这样，是因为您正在突变*ngFor正在迭代的数组。

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

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

角材料mat-tab-group是否正在更改textarea模糊上的活动选项卡，但不触发selectedIndexChange？

1 个答案: