Angular子组件无法识别输入属性的更改。
Angular子组件无法识别输入属性的更改。
我有一个父组件，其中包含一个名为documents的属性。该属性是一个数组，用于将数组中的文件传递给子组件。
但是，当我将一个新的文件推送到我的documents属性中时，子组件的视图不会改变。有人可以告诉我在这里做错了什么吗？
这是父组件中documents属性发生变化的地方：
// 处理从对话框返回的数据
createDialog.afterClosed().subscribe(
data => {
if (data){
// 持久化文档
this.documentService.saveDocument(data.newDocument); // 尚未实现，因为后端不起作用
this.documents.push(data.newDocument);
// 更新所属文档的现有文档存储桶
this.loincToDocumentsMap.get(data.loincCode)?.folderContent.push(data.newDocument);
}
}
);
这是我的子组件：
@Component({
selector: 'document-list',
templateUrl: './document-list.component.html',
styleUrls: ['./document-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DocumentListComponent implements OnInit, OnChanges {
@Input() documents: DocumentReference[] = [];
....
}
这是我在父组件中使用子组件的地方：
我真的很感激一些帮助，因为其他组件也可以正常工作，我找不到任何区别。例如，同一个父组件中的另一个子组件会被正确更新。
更新1：
在添加了这个之后，变化检测起作用了。但是为什么呢？
this.documents = this.documents.filter(document => {
return true;
})
更新2：
谢谢大家，解决方案在答案中:)
问题的原因是Angular的变化检测机制只会检查对象的身份标识，而不会检查对象的内容。因此，对于输入属性的插入或删除操作不会被检测到。
解决方法是重新分配对象来触发变化检测。具体来说，如果想要触发变化检测，需要重新给输入属性赋值。
参考资料：