打字稿：如何在对象更改时使用动态 table 行更新 table

Question

这是我的 html 代码：

</table>
  <tr *ngFor="let task of taskArray">
    <td>{{task.startTime}}</td>
    <td>{{task.endTime}}</td>
    <td></td>
    <td>{{task.action}}</td>
    <td>{{task.glevel1}}</td>
    <td>{{task.glevel2}}</td>
    <td>{{task.glevel3}}</td>
    <td>{{task.glevel4}}</td>
    <td>{{task.glevel5}}</td>
    <td>{{task.train}}</td>
    <td>{{task.trainType}}</td>
    <td>{{task.wagon}}</td>
    <td>{{task.repeaterWagon}}</td>
    <td>{{task.remark}}</td>
  </tr>
</table>

这是我的 ts 代码（我将对象发送到另一个组件，然后将对象推入对象数组）：

taskArray: Task[] = [];

fillTable(task){
  this.taskArray.push(task);
}

在我触发函数 fillTable(task) 后，它不会更新 table 相应的不会将 table 行添加到 table。看起来，我的 table 在更改对象后没有更新。也许这与我将对象发送到另一个组件有关。因为它对我的 table 和 select 或另一个 html 对象都不起作用。

我希望能够更改对象并进一步更新或更改 table。

如何在 table 上触发更新？

[更新]

我应该提到我在我的 "parent html":

中包含了这个 table 所在的组件

<div id="taskTableDiv" style="width: 98%">
    <app-task-table></app-task-table>
</div>

Answer 1

fillTable(task){
  this.taskArray.push(task);
  location.reload();
}

Answer 2

推送任务后尝试分配数组。如果您只是将项目添加到已绑定的数组，则不会进行绑定更改检测。

 this.taskArray = [new Task()];

Answer 3

我想回答我的问题，因为我得到了解决方案：

我现在使用名为 task-service:

的 service

import { Injectable } from '@angular/core';
import { Task } from './task';

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  taskArray: Task[] = [];

  fillTable(task: Task){
    this.taskArray.push(task);

    console.log(this.taskArray)
  }
}

我在 table-组件的 ts 中像这样启动 task-service:

constructor(public taskService: TaskService) { }

我在我的 table-body:

中像这样在同一组件 html 中执行 *ngFor 循环

<tbody>
  <tr *ngFor="let task of taskService.taskArray">
.
.
.
  </tr>
</tbody>

并且像这样更新 table 因为该服务保存变量并使其保持最新。

您可以在此处找到相关教程：https://angular.io/tutorial/toh-pt4

打字稿：如何在对象更改时使用动态 table 行更新 table

Typescript: How to update table with dynamic tablerows when object has changed

html

data-binding

typescript

ngfor

angular