/ / Ionic 3 - * ngIf binding nie aktualizuje się, gdy zmiany stanu - kątowe, jonowe2, jonowe3

Ionic 3 - * ngIf binding nie aktualizuje się, gdy zmiany stanu - kątowe, jonowe2, jonowe3

Obecnie próbuję utworzyć własny komponent niestandardowy i problemy z próbą uzyskania komponentu do wyświetlenia, gdy warunek logiczny zmieni się na prawdziwy.

Próbowałem użyć "ChangeDetectorRef" I użyć "detectChanges ()"po zmianie statusu boolowskiego. Niestety, ciągle dostaję błąd dostawcy:

Błąd: brak dostawcy dla ChangeDetectorRef!

Użyłem changeRef na stronach bez problemu. Naprawdę nie rozumiem, dlaczego potrzebuje dostawcy komponentu, który domyślnie ma być wbudowany w moduły jonowe?

Próbowałem również używać changeRef.detectChange () na stronie, nie ma błędu dostawcy - ale komponent nadal nie jest wyświetlany.

Składnik niestandardowy:

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 komponentu:

<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>

Strona używająca komponentu:

 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();
}

Odpowiedzi:

2 dla odpowiedzi № 1

Powinieneś użyć do tego usługi Angular ngZone.

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

0 dla odpowiedzi nr 2

Ustaw warunek jako *ngIf="showOptionsMenu == true" i zaznacz