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

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

如何触发桌上的更新？

[更新]

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

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

Answer 1

在执行任务后尝试分配阵列。如果仅将一个项目添加到已绑定的数组中，则不会进行绑定更改检测。

 this.taskArray = [new Task()];

Answer 2

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

Answer 3

自从找到解决方案以来，我想回答我的问题：

我现在使用称为 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) { }

我在表主体的同一组件html中执行* ngFor循环：

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

像这样，它会更新表，因为服务会保留该变量并使它保持最新状态。

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

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

3 个答案: