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'];

它在其他情况下运行良好（我使用它）

我想问题是在css中，在这段代码中table.forth.td:nth-child，请问您能告诉我在表格中访问类的正确方法是什么？

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}

第三个问题是在{{item}}标记之外使用<td>。这是无效的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的正确拼写是第四而不是前，但这只是一个假设;）

如何在Angular

1 个答案: