angular - Ionic 3 - *ngIf 绑定(bind)在条件变化时不更新

Question

我目前正在尝试开发自己的自定义组件，但在尝试让组件在 bool 条件变为 true 时显示时遇到问题。

我尝试使用“ChangeDetectorRef”并在更改 bool 状态后使用“detectChanges()”。不幸的是，我不断收到提供商错误:

Error: No provider for ChangeDetectorRef!

我在页面中使用了changeRef，没有任何问题。我真的不明白为什么它需要组件的提供者，而默认情况下它应该内置到 Ionic 模块中？

我也尝试在页面上使用changeRef.detectChange()，没有提供程序错误 - 但组件仍然不显示。

自定义组件:

import { Component, Injectable, NgZone, ChangeDetectorRef } from '@angular/core';

    @Component({
      selector: 'options-popup',
      templateUrl: 'options-popup.html'
    })

    @Injectable()
    export class OptionsPopup {

        public showOptionsMenu:Boolean = false;
        public optionsMenu: {
            header:string,
            options: { iconURL: any, label:string, tapAction: string }[]
        };

        constructor( private changeRef: ChangeDetectorRef) {

        }

        public create( optionsMenu: { header:string, options: { iconURL: any, label:string,
                tapAction: string }[] } ){

            this.optionsMenu = optionsMenu;
        }

        public present(){

            this.showOptionsMenu = true;

            this.changeRef.detectChanges();

            console.log("present clicked - set to " + this.showOptionsMenu);
        }

        public dismiss(){
            this.showOptionsMenu = false;
            // this.cdRef.detectChanges();
        }

    }

组件 HTML:

<div class="options-container" *ngIf="showOptionsMenu">
    <div class="options-header-wrapper"> Send Images to:</div>
    <div class="options-content" >

        <div class="options-item-wrapper" *ngFor="let option of optionsMenu.options">
            <div class="options-kiosk-icon" [style.background-image]="option.iconURL" 
            *ngIf="option.iconURL != null"></div>
             {{ option.label }}
        </div>

    </div>
    <div class="options-cancel-wrapper">Back</div>
</div>

<div class="options-screen-overlay" *ngIf="showOptionsMenu"></div>

使用组件的页面:

 public createSelectIKPopover(){    
        let options: { iconURL: any, label:string, tapAction: string }[] = [];    
        options.push( { iconURL: null, label: "IK01", tapAction: "" } );    
        this.optionsPopup.create( { header: "", options: options });    
        this.optionsPopup.present();    
        this.changeRef.detectChanges();
    }

Answer 1

为此，您应该使用 Angular 服务 ngZone。

this.ngZone.run(() => {
    this.optionsMenu = optionsMenu;
});