如何在Angular中的表中使用ngClass

Question

我有一個表，要在其中聲明ngClass（第一行）

<table [ngClass]="{'before_forth': pageNumber < 4, 'forth': pageNumber = 4}">
    <tr id="words" *ngFor="let item of itemsSource3; let i = index;">
      <td *ngFor="let item2 of helper[i]; let j = index;">
        <input class="resizedTextbox" name="{{i}}{{j}}"
            [(ngModel)]="helper[i][j].value" (ngModelChange)="onValueChange(f,i)"/>
      </td>
    {{item}}
    </tr>
</table>

我的CSS是

table.forth.td:nth-child(2){background-color: green}
table.forth.td:nth-child(5){background-color: green}


table.before_forth.td:nth-child(2){background-color: red}
table.before_forth.td:nth-child(5){background-color: red}

所以，我想做的就是設置顏色，這取決於頁面的數量（在我的組件中，我使用此方法

this.pageNumber = this.activatedRoute.snapshot.queryParams['page'];

在其他情況下也可以正常工作（我經常使用）

我猜問題出在這段代碼table.forth.td:nth-child中的CSS中，您能告訴我什么是訪問表中類的正確方法嗎？

Answer 1

您應該使用pageNumber === 4而不是pageNumber = 4 ，因為那樣的話您只是分配變量：

<table [ngClass]="{'before_forth': pageNumber < 4, 'forth': pageNumber === 4}">

第二個問題是css規則，您在其中使用.td類，即使html中沒有使用它。 我的猜測是您要定位表內的<td>元素：

table.forth td:nth-child(2){background-color: green}
table.forth td:nth-child(5){background-color: green}


table.before_forth td:nth-child(2){background-color: red}
table.before_forth td:nth-child(5){background-color: red}

第三個問題是在<td>標記之外使用{{item}} 。 這是無效的html ，將導致不良行為，您應該將其移至td

另外，請勿將id內部與*ngFor結合使用。 具有id的元素在整個頁面中應該是唯一的。 實際上，如果您沒有特殊用途，最好不要使用id：

<table [class.before_forth]="pageNumber < 4" [class.forth]="pageNumber === 4">
  <tr *ngFor="let item of itemsSource3; let i = index;">
    <td *ngFor="let item2 of helper[i]; let j = index;">
      <input class="resizedTextbox" name="{{i}}{{j}}" [(ngModel)]="helper[i}[j].value" (ngModelChange)="onValueChange(f,i)">
      {{item}}
    </td>
  </tr>
</table>

最后一點是，的正確拼寫4th是四 ，不要出去 ，但是這只是一個供參考）