Представление свойства углового компонента не обновляется, когда функция генерирует выходное событие

Question

Угловая переменная компонента не обновляется в представлении, если метод компонента генерирует выходное событие. Переменная в фокусе: «qMode»,

Функция с генерированием выходного события (НЕ ОБНОВЛЯЕТСЯ ПЕРЕМЕННОЙ)

save() {
    if (this.questionForm.valid) {
        this.question.type = this.questionForm.value.type;
        this.question.description = this.questionForm.value.description;

        this.qMode = 'view';

        this.saveQuestion.emit({
            index: this.index,
            question: this.questionForm.value,
        });
    }
}

Функция без генерирования выходного события (ОБНОВЛЕНИЕ ПЕРЕМЕННОЙ)

save() {
    if (this.questionForm.valid) {
        this.question.type = this.questionForm.value.type;
        this.question.description = this.questionForm.value.description;
        this.qMode = 'view';
    }
}

Здесь вы найдете код Демо ,

Answer 1

Когда вы вызываете emit для saveQuestion, это запускает родительский компонент для обновления списка вопросов.

Поскольку трек по значению не задан, список будет перерисован заново. В компоненте вопросов onInit значение снова изменяется на «редактировать».

Вы можете исправить это, добавив трек по функциям в список. Это обеспечивает повторную визуализацию компонентов только при наличии изменений.

в app-component.html

<div *ngFor="let question of questions; let i = index; trackBy: trackQuestion">

в app-component.ts

trackQuestion(index: number, question) {
    return index.toString();
    // you can implement custom logic here using the question
}

Пример стекаблица можно найти здесь: https://stackblitz.com/edit/angular-fdshce