Угловой материал mat-tab-group меняет активную вкладку на размытие текста, но не запускает selectedIndexChange?

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 явно не работает, индекс не обновляется, и это, похоже, является причиной моей ошибки.

Любая идея будет оценена

РЕДАКТИРОВАТЬ: похоже, потому что данные, поддерживающие вывод mat-tab через ngFor, редактируются изменением textarea, и это кажется плохой идеей, хотя я не знаю, почему это вызывает такую ​​проблему.

Answer 1

Это происходит потому, что вы изменяете массив, который повторяется *ngFor.

Вам нужно изменить массив строк на массив объектов и изменить свойство каждого объекта, потому что в этом случае элемент массива не изменяется, какие изменения являются свойством, и это не влияет на *ngFor поведение материала.

Вот живой пример: https://stackblitz.com/edit/angular-qhhcpi?file=app%2Ftab-group-basic-example.ts