Angular/Ionic NGClass 没有做任何事情

Question

我有一个问题：
我是 ionic/angular 新手，我无法让 ng-class 工作

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

在我的服务中被调用，所以我不应该成为任何 ng-model 的任务，对吗？
我的意思是 {{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}} 正在工作，所以 Angular 应该让我使用的每个变量都正确吗？

它在浏览器中的显示方式：

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

我还尝试从函数内部的 ng 样式和控制台日志调用服务内部的函数，以测试它是否被调用但没有。
示例：<span class="ctr" ng-style="{'color':getTileColor(tile)}">{{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}}</span>

此外，如果 x%3 == 0，我想强制一个新行 我在想类似的东西（但它不起作用）：

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

^ 我把 ion-row 放在第一个 nGFor 里面

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

ROWS how it is
ROWS how it should be

Answer 1

我认为您将角度 1 与角度 2 混淆了。

ng-style 和 ng-class 是 Angular 1 语法

在 Angular 2 及以上版本中，调用这些指令的正确方法是：

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

链接到docs