Wie in Angular

Question

ngClass mit Tabelle verwenden ich eine Tabelle, wo ich ngClass (erste Reihe)

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

Und mein CSS ist

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} 

So erklären will, was würde Ich mag zu tun ist, um die Farbe einzustellen, die ich in anderen Fällen

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

und es funktionierte gut mit dieser Methode auf der Anzahl der Seite (in meiner Komponente hängt (Ich benutze es oft)

Ich denke, das Problem ist in css, in diesem Stück Code table.forth.td:nth-child, können Sie mir bitte sagen, was wäre der richtige Weg, Zugriff auf Klasse innerhalb der Tabelle?

Answer 1

sollten Sie pageNumber === 4 verwenden und nicht pageNumber = 4, denn dann werden Sie nur die Variablen zugewiesen:

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

Das zweite Problem ist die CSS-Regel, die Sie in eine .td-Klasse, auch wenn es nirgendwo verwendet wird in der html. Meine Vermutung ist, dass Sie das <td> Element in der Tabelle ausrichten möchten:

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} 

Das dritte Problem ist die Verwendung von {{item}} außerhalb des <td>-Tag. Dies ist ungültig html und in unerwünschtem Verhalten führen, sollten Sie dies in der auch td

bewegen, nicht id nicht innen mit *ngFor in Kombination verwendet werden. Ein Element mit einer ID soll auf der gesamten Seite eindeutig sein. Eigentlich ist es besser, nicht-ID zu verwenden, überhaupt, wenn Sie keine spezielle Verwendung für sie haben:

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

Der letzte Punkt ist, die richtige Schreibweise von 4th ist vierte und nicht weiter, aber das ist nur ein fyi;)