gpt4 book ai didi

Angular Material mat-tab-group 正在更改 textarea 模糊上的事件选项卡但不触发 selectedIndexChange?

转载 作者:太空狗 更新时间:2023-10-29 19:32:05 24 4
gpt4 key购买 nike

给定以下组件:

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 更改编辑,这似乎是一个坏主意,尽管我不知道为什么会导致这样的问题。

最佳答案

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

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

这是一个活生生的例子:https://stackblitz.com/edit/angular-qhhcpi?file=app%2Ftab-group-basic-example.ts

关于 Angular Material mat-tab-group 正在更改 textarea 模糊上的事件选项卡但不触发 selectedIndexChange?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54126362/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com