如何根据值行号阻止或绘制 table 中的特定行 - Angolr 2 和 NgFor

Question

我使用 angular2 工作。在我的例子中有 table 个游戏，并且在数据库中有之前点击过的游戏列表（一个按钮 - 行可以点击一次）。所以我想将 class（块或油漆没关系）添加到游戏列表中显示的数字行。

<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.gamesVoted --->> 是用户 voted/click 之前我想要 block/paint 该数组中显示的每一行的数字 ID 数组 table按编号。我尝试将 class 添加到行，但它对我不起作用。

Answer 1

首先，您的 *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) 中显示的游戏 ID 是否是 gamesVoted 数组的一部分，如果是，则添加 .vis_button css class 到那一行。

如何根据值行号阻止或绘制 table 中的特定行 - Angolr 2 和 NgFor

How do I block or painting a specific line in the table based on the value line numbers - Angolr 2 and NgFor

row

html-table

block

ngfor

angular