Ich benutze Angular2 und Bootstrap für eine Komponente. Ich versuche, meinem tr-Tag eine Klasse hinzuzufügen, wenn die Eigenschaft "2" des Tests aus der * ngFor-Schleife einer importierten Variablen namens newTest entspricht. Aber es fügt die Klasse nicht hinzu.Angular 2 - * ngFor mit bedingter Klasse
Hier ist meine Komponente:
loadTest() {
this.testService.getTests()
.then((data) => {
this.tests = data
})
}
ngOnInit() {
this.loadTest();
}
Die Tabelle korrekt angezeigt wird, aber die Klasse ist nicht da.
Der Zustand ist aber definitiv erfüllt.
Hier ist mein html:
<div class="table-responsive">
<table class="table table-hover table-reflow">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let test of tests" [class.newDevice]="test.2 === this.newTest" [attr.class]="test.1" >
<th>{{test.1}}</th>
<th>{{test.2}}</th>
<th>{{test.3}}</th>
<th>{{test.4}}</th>
<th>{{test.5}}</th>
</tr>
</tbody>
</table>
</div>
Bin ich etwas anderes falsch? Ich habe versucht, das gleiche mit Jquery zu erreichen, auch:
loadTest() {
this.testService.getTests()
.then((data) => {
this.tests = data
if (NewTest.length !== undefined) {
let index = this.tests.findIndex((e) => { return e.2 === NewTest })
let test = this.tests[index].id
jQuery(test).addClass("newDevice");
}
})
)
Warum haben Sie '[class.newDevice]' und '[attr.class]'? Überschneiden sich diese beiden nicht? – martin
AFAIK 'attr.class' sollte vermieden werden (verursacht Probleme in Safari mobile zum Beispiel). Verwenden Sie stattdessen '[ngClass]'. –
Könnten Sie das bitte versuchen: '[ngClass] =" {'newDevice': test.2 == newTest} "'? – rinukkusu