Css 如何将ngClass与表格结合使用

我有一个表，我想在其中声明ngClass（第一行）

因此，我想做的是设置颜色，这取决于页数（在我的组件中，我使用这种方法）

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

在其他情况下，它也能很好地工作（我经常使用它）

---

我猜问题出在css中，在这段代码

表中。forth.td:nth child

，你能告诉我什么是访问表中类的正确方法吗？

你应该使用

pageNumber===4

而不是

pageNumber=4

，因为你只是在分配变量：

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

第三个问题是在

标记之外使用

{{item}

。这是无效的

html

，会导致不必要的行为，您应该将其移动到

td

另外，不要将

id

inside与

*ngFor

结合使用。带有id的元素在整个页面中应该是唯一的。实际上，如果您对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>

{{item}}

---

最后一点是，

4th

的正确拼写是第四而不是第四，但这只是供参考的；）

table.forth.td

-指一个

table

，它有一个类

forth

和另一个类

td

，我想你想要这个：

table.forth td:nth-child（）

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

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}

<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>