动态更改td值角度2

Question

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

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"; 
    } 
}