离子 3 - *ng如果条件更改时绑定不更新

Question

我目前正在尝试开发自己的自定义组件，并且在尝试让组件在布尔条件更改为 true 时显示时遇到问题。

我尝试使用"ChangeDetectorRef"并在更改布尔状态后使用"detectChanges（）"。不幸的是，我不断收到提供商错误：

错误：没有 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;
});

Answer 2

将条件设置为*ngIf="showOptionsMenu == true"并检查