Angular 动态更改td值角度2

我有一个使用的组件，在第一次渲染后的表中，我想在

td

中更改一些值。我知道我应该使用angular2中的

ElementRef

和

Renderer

，我的问题是如何更改所有

td

s的值，例如，将类

test

更改为test或类似的内容，并重新提交组件。欢迎提供任何帮助：）

正确的方法是将数组呈现为表。无论何时更改阵列，都会自动渲染视图。签出示例：

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
Vin
年
烙印
颜色
{{row.col1}}
{{row.col2}}
{{row.col3}}
{{row.col4}}
更改值`
})
导出类AppComponent{
私有数据=[{
col1:'dsad231ff'，
col2:‘2012’，
col3:‘大众’，
col4:‘橙色’，
},{
col1:'dsad231ff'，
col2:‘2012’，
col3:‘大众’，
col4:‘橙色’，
},{
col1:'dsad231ff'，
col2:‘2012’，
col3:‘大众’，
col4:‘橙色’，
},{
col1:'dsad231ff'，
col2:‘2012’，
col3:‘大众’，
col4:‘橙色’，
}]
构造函数（）{
}
changeValues（）{
this.data[0].col2=“此值已更改”；
this.data[2].col3=“此值已更改”；
}
}

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