Angular 2 mit Eigenschaft in erweiterter Klasse für ngIf funktioniert nicht

Question

Ich habe eine eckige 2-Komponente für ein Modal erstellt, und diese Komponente erweitert eine modale Basisklasse, die eine boolesche Eigenschaft enthält, die angibt, ob das Modal geöffnet ist oder nicht. Ich muss diese Eigenschaft dann in einem * ngIf in der Vorlage verwenden, um das Modal anzuzeigen/auszublenden.

Das Problem ist, dass ich die folgende Fehlermeldung erhalten, wenn ich meine offene Methode nennen:

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false' 

Meine modale Komponente:

@Component({ 
    selector: 'cmg-modal-create', 
    template: require('./modal.create.html') 
}) 
export class ModalCreateComponent extends Modal { 
    constructor() { 
    super(); 
    } 
} 

Meine Komponentenvorlage:

<div class='modal-overlay' *ngIf='isModalOpen'></div> 
<section id='modal-create' class='modal' *ngIf='isModalOpen'> 
    // modal body 
</section> 

Die Modal Klasse:

export class Modal { 
    protected isModalOpen: boolean = false; 

    protected open(): void { 
    this.isModalOpen = true; 
    } 

    protected close(): void { 
    this.isModalOpen = false; 
    } 
} 

schließlich in einem Top-Level-Komponente nenne ich die Modalverben offene Methode

Top-Level-Komponente:

@Component({ 
    directives: [ ModalCreateComponent ], 
    selector: 'cmg-project-card', 
    template: require('./project-card.html') 
}) 
export class ProjectCardComponent { 
    @ViewChild('createModal') createModal: any; 

    private openModal(): void { 
    this.createModal.open(); 
    } 
} 

Top-Level-Komponenten-Template:

<cmg-modal-create #createModal></cmg-modal-create> 

Answer 1

Diese Fehlermeldung bedeutet, haben Sie nicht einen Fehler in der Winkel selbst treffen unter der Annahme, dass etwas, das heißt einfach Daten für das Rendern in der Ansicht abrufen ändert den Wert. Um es richtig zu beheben, müssen Sie herausfinden, was es ist und es ändern, um seine Nebenwirkung zu entfernen.

Answer 2

Import folgendes:

import { ChangeDetectorRef } from '@angular/core';

Dann ChangeDetectorRef zu Ihrem Konstruktor hinzufügen und detectChanges() Methode verwenden, wenn boolean Wert ändern, wie folgt aus:

this.changeDetectionRef.detectChanges();