動的にtd値の角度を変更する

Question

私はhttp://www.primefaces.org/primeng/#/datatableを使用するコンポーネントを持っています。初めてレンダリングした後のテーブルでは、tdのいくつかの値を偶然に変更したいと思います。私はElementRefとRendererをangular2から使うべきであることを知っています。私の問題はどのようにして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"; 
    } 
}