打字稿:对象更改后，如何使用动态表行更新表 [英] Typescript: How to update table with dynamic tablerows when object has changed

问题描述

这是我的html代码:

this is my html code:

</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代码(我将一个对象发送到另一个组件，然后将该对象推入对象数组):

this is my ts-code (I send an object to another component where I push the object into an object-array):

taskArray: Task[] = [];

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

我触发函数 fillTable(task)后，它不会更新表，也不会在表中添加表行.看起来，更改对象后我的表未更新.也许与我将对象发送到另一个组件有关.因为它既不适用于我的表，也不适合select或另一个html对象.

After I fired the function fillTable(task) it won't update the table respective won't add tablerows to the table. It seems like, my table is not updating after changing the object. Maybe it has something to do with that I send the object to another component. Because it neither work for my table nor for a select or another html-object.

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

I want to be able to change the object and furthermore update or alter the table.

如何在桌面上触发更新?

How can I trigger the update on the table?

[更新]

我应该提到我在父html"中包含了表所在的组件:

I should have mentioned that I included this component where the table lies like this in my "parent html":

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

推荐答案

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

I want to answer my question since I got to a solution:

我现在使用称为 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 :

I initiate the task-service like this in my ts of my table-component:

constructor(public taskService: TaskService) { }

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

I do the *ngFor-loop in this same component html like this in my table-body:

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

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

And like this it updates the table because the service holds the variable and keeps it up to date.

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

You can find a tutorial for this here: https://angular.io/tutorial/toh-pt4

这篇关于打字稿:对象更改后，如何使用动态表行更新表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！