动态改变 td 值 angular 2

Question

我有一个使用http://www.primefaces.org/primeng/#/datatable 的组件，在第一次渲染后，我想在该表中更改td 中的一些值。我知道我应该使用 angular2 中的 ElementRef 和 Renderer，我的问题是如何更改所有具有 test 类的 tds 的值来测试或类似的东西并重新渲染组件。欢迎任何帮助:)

Answer 1

这样做的正确方法是将数组呈现为表格。每当您更改数组时，视图都会自动呈现。查看示例：https://plnkr.co/edit/cPRQb2?p=preview。

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `<div class="ui-datatable-tablewrapper">
              <table class="undefined">
                  <thead class="ui-datatable-thead">
                      <tr class="ui-state-default">
                          <th class="ui-state-default ui-unselectable-text" >
                            <span class="ui-column-title">Vin</span>
                          </th>
                          <th class="ui-state-default ui-unselectable-text" >
                            <span class="ui-column-title">Year</span>
                          </th>
                          <th class="ui-state-default ui-unselectable-text" >
                              <span class="ui-column-title">Brand</span>
                          </th>
                          <th class="ui-state-default ui-unselectable-text" >
                              <span class="ui-column-title">Color</span>
                          </th>
                      </tr>
                  </thead>
                  <tbody class="ui-datatable-data ui-widget-content">
                      <tr *ngFor="let row of data" class="ui-widget-content ui-datatable-even">
                          <td >
                              <span class="ui-cell-data">{{ row.col1 }}</span>
                          </td>
                          <td >
                              <span class="ui-cell-data">{{ row.col2 }}</span>
                          </td>
                          <td >
                              <span class="ui-cell-data">{{ row.col3 }}</span>
                          </td>
                          <td >
                              <span class="ui-cell-data">{{ row.col4 }}</span>
                          </td>
                      </tr>
                  </tbody>
              </table>
          </div><button (click)="changeValues()">Change Values</button>`
})
export class AppComponent{

  private data = [{
    col1: 'dsad231ff',
    col2: '2012',
    col3: 'VW',
    col4: 'Orange',
  },{
    col1: 'dsad231ff',
    col2: '2012',
    col3: 'VW',
    col4: 'Orange',
  },{
    col1: 'dsad231ff',
    col2: '2012',
    col3: 'VW',
    col4: 'Orange',
  },{
    col1: 'dsad231ff',
    col2: '2012',
    col3: 'VW',
    col4: 'Orange',
  }]

  constructor(){

  }

  changeValues(){
      this.data[0].col2 ="this value has changed";
      this.data[2].col3 ="this value has changed";
  }
}