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

Question

我有一个带有属性 shouldNavBeTransparent: boolean = true 的 HomePage 页面，它指示页面的 navbar 是否应该有 class="transparent 与否。

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

我的问题是属性未在视图中更改。在视图中，它始终为 false，而在组件中，它正在改变。

这是我的 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);
  }
}

scrollHandler中的console.log输出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);
   })

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

Angular 4 - property value isn't being updated in the view

typescript

ionic-framework

ionic2

ionic3

angular

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

Angular 4 - property value isn't being updated in the view

typescript

ionic-framework

ionic2

ionic3

angular

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