Ionic 3 - * ngIf条件の変更時にバインディングが更新されない

Question

現在、私は自分のカスタムコンポーネントを開発しようとしています。ブール条件がtrueに変わったときにコンポーネントを表示しようとすると問題が発生します。

私は "ChangeDetectorRef" を使用してみましたとブールのステータスを変更した後、 "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

P ut条件として*ngIf="showOptionsMenu == true"とチェック

Answer 2

これにはAngularサービスngZoneを使用する必要があります。

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