angular - 如何在我的 View 中实现动态类？

Question

我正在使用位于 Angular 2 之上的 Ionic 2。我想将一个类添加到我的 ion-header 元素中。这是为了让标题最初具有透明背景，但在滚动时具有纯色背景。

我正在我的 Typescript 文件中设置一个变量，并在用户滚动时更新该变量。

我需要根据我的 Typescript 变量中的变量设置类。我在我的应用程序的其他地方使用 [ngClass]="{showBack: navBack}" 完成了此操作，但这似乎在此页面上不起作用。

typescript :

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
  selector: 'page-class',
  templateUrl: 'class.html'
})
export class ClassPage {
  @ViewChild(Content)
  content: Content;
  navBack: boolean = false;

  constructor(...){}

  ngAfterViewInit() {
    this.content.ionScroll.subscribe((event) => {
      if(event.scrollTop == 0) {
        this.navBack = false;
      } else {
        this.navBack = true;
      }
    });
  }

}

HTML:

<ion-header [ngClass]="{showBack: navBack}">
  <ion-navbar>
    <ion-title>Test</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <p style="height: 300px">Long page of content here.</p>
  <p style="height: 300px">Long page of content here.</p>
  <p style="height: 300px">Long page of content here.</p>
</ion-content>

我希望在我的 ion-header 上看到一个 showBack CSS 类，它出现在滚动条上，但它从未出现，无论 event 的值如何.scrollTop.

我已经在 ngAfterViewInit 函数上使用 console.log 进行了一些调试，我可以确认变量被正确更改，但类没有更新。

Answer 1

不应该是:

[ngClass]="{'showBack': navBack}"

(你缺少单引号)