Angular / Ionic NG-Class没有做任何事情

Question

i have a problem:
im new to ionic/angular and im not able to make ng-class work

 <ion-content padding> <ion-grid> <ion-row> <ion-col> <ion-row> <ion-col *ngFor="let field1 of gs.fields; let x = index; trackBy: trackByFn"> <!-- new row if x % 3 == 0 --> <ion-col *ngFor="let field2 of field1; let y = index; trackBy: trackByFn"> <ion-row> <ion-col class="ctr fc tile" *ngFor="let tile of field2; let z = index; trackBy: trackByFn" (click)="playerClick(x,y,z)"> <span class="ctr" ng-class="{'player1': tile==1, 'player2' : tile==2}">{{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}}</span> </ion-col> </ion-row> </ion-col> </ion-col> </ion-row> </ion-col> </ion-row> </ion-grid> </ion-content> 

(click)="playerClick(x,y,z)"

Is getting Called in my Service, so i shouldnt be mission any ng-model right?
I mean {{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}} {{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}} is working, so Angular should have every variable im using right?

How its shown in the Browser:

<ion-col class="ctr fc tile col">
<span class="ctr" ng-class="{'player1': tile==1, 'player2' : tile==2}">x</span>
</ion-col>

I also tried to call a Function inside my Service from ng-style and console log inside the function to test if its called but it wasnt.
Example: <span class="ctr" ng-style="{'color':getTileColor(tile)}">{{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}}</span> <span class="ctr" ng-style="{'color':getTileColor(tile)}">{{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}}</span>

Furthermore i would like to force a new row if x%3 == 0 Im thinking of something like (but it isnt working):

 <ion-content padding> <ion-grid> <ion-row> <ion-col> <ion-col *ngFor="let field1 of gs.fields; let x = index; trackBy: trackByFn"> <ion-row ng-if "x % 3 == 0"> <!-- new row if --> <ion-col *ngFor="let field2 of field1; let y = index; trackBy: trackByFn"> <ion-row> <ion-col class="ctr fc tile" *ngFor="let tile of field2; let z = index; trackBy: trackByFn" (click)="playerClick(x,y,z)"> <span class="ctr" ng-class="{'player1': tile==1, 'player2' : tile==2}">{{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}}</span> </ion-col> </ion-row> </ion-col> </ion-row ng-if "x % 3 == 0"> </ion-col> </ion-col> </ion-row> </ion-grid> </ion-content> 

^ I put ion-row inside the first nGFor there

<ion-row ng-if "x % 3 == 0">

ROWS how it is
ROWS how it should be

Answer 1

i think you're confusing angular 1 with angular 2.

ng-style and ng-class are angular 1 syntax

in angular 2 and above the correct way to invoke these directives is:

[ngClass]="{'player1': tile==1, 'player2' : tile==2}"
[ngStyle]="{'font-size': fontSize+'px'}"

link to docs