Блог

Я работаю с angular2 . В моем случае есть таблица игр, а в базе данных есть список игр, которые нажимались ранее (одна кнопка — строка может нажиматься один раз). Итак, я хочу добавить класс (заблокировать или нарисовать, неважно) к числовой строке, которая отображается в списке игр.

 <table id="table-list" class="table table-hover table-striped" >
<thead>
<tr class="strong" style="text-align: center">
    <td>Number</td>
    <td>Host</td>
    <td>X</td>
    <td>Guest</td>
 </tr>
</thead>
<tbody >
<tr *ngFor="#g of games | reverse ">
           <td> {{g.id}}</td>
           <td id="btn1"> <button (click)="fbPostVote(g.id,1)" type="button" class="btn btn-default">  {{g.host}}</button></td>
           <td id="btn2" > <button (click)="fbPostVote(g.id,'X')"type="button" class="btn btn-default">  X </button></td>
           <td  id="btn3" > <button (click)="fbPostVote(g.id,2)" type="button" class="btn btn-default">  {{g.guest}}</button></td>
</tbody>
  

css (блокировать и рисовать):

 .vis_button{
background-color:gray;
opacity: .7;
pointer-events: none;}
  

ts-код:

  ngOnInit() {
     firebase.database().ref('/usersFacebook/').child(fix_userEmail).child('GamesVotes').on('child_added', (snapshot)=> {
        this.gamesVoted.push(snapshot.val())
    })
}
  

this.gamesвопросы —>> Является ли массив идентификатором номера, за который пользователь проголосовал / щелкнул перед этим, я хочу заблокировать / нарисовать каждую строку, которая отображается в этом массиве в таблице, по идентификатору.
Я пытаюсь добавить класс в строку, но у меня это не работает.

Прежде всего, в вашей *ngFor директиве ошибка. Я не знаю, какую версию Angular 2 вы используете, но вы должны использовать ключевое слово let вместо # для определения переменной шаблона. То, что вы ищете ngClass директиву — она добавляет или удаляет стиль в зависимости от условия. В вашем случае это должно быть что-то вроде этого:

 <tbody>
    <tr *ngFor="let g of games | reverse" [ngClass]="{ 'vis_button': gamesVoted.includes(g.id) }">
       <td> {{g.id}}</td>:
       <td id="btn1"> <button (click)="fbPostVote(g.id,1)" type="button" class="btn btn-default">  {{g.host}}</button></td>
       <td id="btn2" > <button (click)="fbPostVote(g.id,'X')"type="button" class="btn btn-default">  X </button></td>
       <td  id="btn3" > <button (click)="fbPostVote(g.id,2)" type="button" class="btn btn-default">  {{g.guest}}</button></td>
    </tr> //you are missing this line
</tbody>
  

ngClass директива проверяет, является ли идентификатор игры, отображаемый в текущей строке ( g.id ), частью gamesVoted массива, и если это так, она добавляет .vis_button класс css к этой строке.