更新数据时，Angular 组件如何重新渲染？

Question

我想了解当底层数据发生变化时，Angular 组件如何重新渲染以显示新信息。 （例如推送/删除）

我有以下使用数据服务获取数据的组件。首次初始化组件时，将执行构造函数并检索现有数据（如果有）。

Table.component.ts

export class TableComponent implements OnInit {
  table : Task[]
  dropdowns = ["green", "yellow", "red"]
  taskName : string
  taskStatus : string
  @ViewChild('form') form: NgForm

  
  constructor(private tableService : TableService) {
    // if I comment the line below my table does not get updated when submitTask() is run.
    this.table = tableService.getData();
  }
 
  submitTask() {
    const taskName : string = this.form.form.value.taskName
    const taskStatus : string = this.form.form.value.taskStatus
    const task: Task = {item: taskName, status: taskStatus}
    this.tableService.addData(task)
  }

  ngOnInit(): void {

  }

}

Table.service.ts

export class TableService {
  tableData : Task[] = []

  constructor() { }

  addData(task : Task) {
    this.tableData.push(task)
  }

  getData() : Task[] {
    return this.tableData
  }


}

组件的submitTask()函数使用tableService更新table数据源。每当调用submitTask() 时，似乎this.table 数组也会突然更新。 TableComponent 的构造函数是否再次被调用？我不确定处理数据更改的角度工作流程。

Answer 1

您可以使用ChangeDetectorRef 来刷新数据。

import { ChangeDetectorRef } from '@angular/core';

//...

table: Task[];

constructor(private changeDetectorRefs: ChangeDetectorRef, 
            private tableService : TableService) { }

//...

ngOnInit(): void {
  this.refresh();
}

refresh() {      
   this.tableService.getData().subscribe((data: Task[]) => {
   this.table = data;
   this.changeDetectorRefs.detectChanges();
  }
} 

Answer 2

您没有与我们共享服务代码，但您的 getData() 可能只是返回存储在服务中的数组reference。

这意味着组件table随后被分配了此引用，因此服务中数组的任何更改都会反映在组件中，因为它们基本上指向相同的数据。

TableComponent的构造函数又被调用了吗？

没有。