Как установить стиль элемента html для таблицы Dynami c?

Question

Я ищу способ установить стиль HTML в динамической таблице c, инициализированной *ngFor, когда моя таблица полностью инициализирована.
Я пытался ngAfterViewInit, ngAfterContentInit, но не работал. Когда я регистрирую свой элемент (console.log(document.getElementById(my_tr_id)) в этих функциях, он все еще равен нулю.

Есть идеи?

Answer 1

Вы можете просто сделать это так, как вы написали код, не зная, почему ваш экземпляр не работает.

Я добавил код в следующем фрагменте, где вы можете увидеть необходимые изменения.

Вы также можете увидеть рабочий стек стека здесь: https://stackblitz.com/edit/angular-pvepzg

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dataId = 2;
  activeDatasChecklist = [{
    id: 1,
    name: 'data 1',
  }, {
    id: 2,
    name: 'data 2',
  }, {
    id: 3,
    name: 'data 3',
  }, {
    id: 4,
    name: 'data 4',
  }, ]

  addNew() {
    this.activeDatasChecklist.push({
      id: 2,
      name: 'new addition'
    })
  }
}

.focus {
  background-color: yellow;
}

<table>
  <tbody>
    <tr *ngFor="let data of activeDatasChecklist" [ngClass]="{'focus':data.id === dataId}">
      <td>{{data.name}}</td>
      <td>{{data.id}}</td>
    </tr>
  </tbody>
</table>

<button (click)="addNew()">Add new</button>

Answer 2

Вы можете использовать @ViewChildren для этой цели

 <ul>
      <li class="list" #allTheseThings *ngFor="let i of items; let last = last">{{i}}</li>
 </ul>

, а затем прослушать это в своем ts:

ngAfterViewInit() {

    this.things.changes.subscribe(t => {
      this.ngForRendred();
    ...
    })
  }

мой пример: https://stackblitz.com/edit/angular-2t19gf?file=src%2Fapp%2Fapp.component.ts

origional Ответ здесь: выполнить функцию, когда * ngFor завершен в angular 2