Question

我有一个使用http://www.primefaces.org/primeng/#/datatable的组件，并且在第一次渲染后在该表中，我想在td中以不明显的方式更改某些值。我知道我应该使用angular2中的ElementRef和Renderer，我的问题是我如何更改具有类td的所有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";
  }
}

动态改变td值angular 2

1 个答案: