Angular 子组件无法识别输入属性的更改

Question

我有一个父组件，它包含一个名为文档的属性。该属性是一个数组，用于将数组中的文档传递给子组件。

但是，当我将新文档推送到属性文档中时，子组件的视图没有改变。有人能告诉我我在这里做错了什么吗？

这是父组件中属性文档发生更改的位置：

 // handle the data that comes back from the dialog
 createDialog.afterClosed().subscribe(
  data => {
    if (data){

      // persist vital signs
      this.documentService.saveDocument(data.newDocument); // not implemented yet because it makes no sense with non functioning backend

      this.documents.push(data.newDocument);

      // update the existing document bucket the document belongs to
      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[] = [];
  
  ....
}

这就是我在父组件中使用子组件的地方：

<document-list *ngIf="showListUi" [documents]="documents"></document-list>

我真的很感激一些帮助，因为同样的工作与其他组件，我看不出任何区别。例如，位于同一父组件中的另一个子组件正在正确更新。

更新1：

添加此后，更改检测就起作用了。但为什么？

this.documents = this.documents.filter(document => {
        return true;
      })

Update-2： 谢谢大家，解决方案就在答案中:)

Answer 1

角度变化检测仅检查对象身份，而不检查对象内容。因此不会检测到插入或删除。

请阅读此处： https: //stackoverflow.com/a/43223700/5835354和 /sf/answers/3007390641/