Angular 4 - 属性值未在视图中更新

Question

我有一个HomePage页面，其中包含一个属性shouldNavBeTransparent: boolean = true，表明页面的导航栏是否应该有class="transparent。

在窗口达到其高度的90％后，我将属性shouldNavBeTransparent设置为true。

我的问题是视图中没有更改属性。在视图中，它总是错误的，而在组件中，它正在被更改。

这是我的home.ts文件：

import {Component} from '@angular/core';
import {IonicPage} from 'ionic-angular';

@IonicPage({segment: "/"})
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  services: Array<{ icon: string, title: string, subhead: string, content: string }>;

  shouldNavBeTransparent: boolean = true;

  scrollHandler($event) {
    this.shouldNavBeTransparent = ($event.scrollWidth * 0.9) < $event.scrollTop;
    console.log(this.shouldNavBeTransparent);
  }
}

console.log中的scrollHandler输出true和false，表示它正在改变：

我在视图中检查属性的部分是（home.html）：

<ion-header [class.transparent]="shouldNavBeTransparent">

我触发滚动事件的部分：

<ion-content (ionScroll)="scrollHandler($event)">

即使我写{{ shouldNavBeTransparent }}，我得到的一切都是真的。

我正在使用Ionic v3.19.1

Answer 1

您可以使用ngClass有条件地分配课程：

<div [ngClass]="{'yourclass':yourcondition}">

针对您的具体问题：

<ion-header [ngClass]="{'transparent':shouldNavBeTransparent}">

修改：

import { ChangeDetectorRef } from '@angular/core';

constructor (private ref: ChangeDetectorRef) {}

scrollHandler($event) {
    this.shouldNavBeTransparent = ($event.scrollWidth * 0.9) < $event.scrollTop;
    this.ref.detectChanges();
}

this.ref.detectChanges();应手动更新您的变量。

Answer 2

经过一些研究后，我发现你需要使用 ngZone 。

滚动事件发生在Angular的区域之外。这是出于性能原因。因此，如果您尝试将值绑定到任何滚动事件，则需要将其包装在zone.run（）

中

import { Component, NgZone } from '@angular/core';
 constructor( public zone: NgZone){}
scrollHandler($event) {
   this.zone.run(()=>{
     // the update needs to happen in zone
    this.shouldNavBeTransparent = ($event.scrollWidth * 0.9) < $event.scrollTop;
    console.log(this.shouldNavBeTransparent);
   })