1

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

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

表.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 {

  }

}

表服务.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调用了吗？我不确定处理数据更改的角度工作流程。

4

2 回答 2

1

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

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

是否再次调用了 TableComponent 的构造函数？

不。

于 2021-08-28T07:35:33.880 回答
0

您可以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();
  }
}
于 2021-08-28T09:12:36.567 回答