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

Posted 2023-03-13

【中文标题】打字稿：如何在对象更改时使用动态表行更新表

【英文标题】：Typescript: How to update table with dynamic tablerows when object has changed

【发布时间】：2019-01-13 13:31:40

【问题描述】：

这是我的 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) 后，它不会更新表格，相应地不会将表格添加到表格中。看起来，我的表在更改对象后没有更新。也许这与我将对象发送到另一个组件有关。因为它既不适用于我的表格，也不适用于 select 或其他 html 对象。

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

如何触发对表的更新？

[更新]

我应该提到我在我的“父 html”中包含了这个表格所在的组件：

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

【问题讨论】：

服务可以吗？

【参考方案1】：

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

我现在使用一个名为task-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)
  

我在表组件的 ts 中像这样启动 task-service：

constructor(public taskService: TaskService)  

我在我的 table-body 中像这样在同一个组件 html 中执行 *ngFor-loop：

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

这样会更新表，因为服务会保存变量并使其保持最新状态。

你可以在这里找到一个教程：https://angular.io/tutorial/toh-pt4

【参考方案2】：

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

 this.taskArray = [new Task()]; 

【讨论】：

我同意，但会像这样重新分配：this.taskArray = [...this.taskArray];

【参考方案3】：

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

【讨论】：

谢谢。但这对我不起作用。这会重新加载整个页面，我只想更新表格。如果我重新加载页面，它将重置页面上的所有内容。我更新了我的问题。

fillTable(task) 会在onClick按钮还是什么时候执行？

请编辑您的答案以添加对您的代码如何工作以及它如何解决 OP 问题的解释。很多 SO 发帖人都是新手，看不懂你贴的代码。

它也可能无法解决此类问题，因为它就像一个“典型的”信息学答案 --> 重新启动您的 PC 并查看是否有效。