Angular 组件 属性 函数发出输出事件时视图未更新

Question

Angular 如果组件方法生成输出事件，组件变量不会在视图中更新。焦点变量是 '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';
    }
}

请在此处查找代码 Demo、

Answer 1

当您在 saveQuestion 上调用 emit 时，这会触发父组件更新问题列表。

由于您没有设置按值跟踪，因此会重新呈现列表。在问题组件onInit中，值改回'edit'.

您可以通过在列表中按功能添加曲目来解决此问题。这确保组件仅在发生更改时才重新呈现。

在应用程序中-component.html

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

在应用程序中-component.ts

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

您可以在此处找到一个 stackblitz 示例：https://stackblitz.com/edit/angular-fdshce