Wie kann ich den UI-Status bei Modelländerungen in Angular2 beibehalten?

Was ist der beste Weg, um den UI-Status in angle2 beizubehalten? Derzeit habe ich ein Problem mit einer einzelnen Komponente.

Also ich versuche, Klasse mit Ngif zu pflegen, aber weiß nicht, wie man diese Bedingung setzt, um Klasse auf Ngif zu ändern.

 *ngif="uiState=desired.elementId" // how to set class here?

und gibt es eine andere Möglichkeit, den Zustand in angle2 beizubehalten? Ich habe sogar versucht, beobachtbare Dienste zu verwenden, aber die Daten kommen zuerst und werden später gerendert, so dass sie nicht funktionieren. Gibt es eine Funktion, die ich auf viewupdate complete etc aufrufen kan

AKTUALISIERE

my Observable service

this.ObservableService.getData.subscribe((val) => {
                     this.data= val;
                  });

my html

<div *ngFor="let foo of data">
    <div class="collapsible-header" [id]="foo.array1.value1">
        {{poo.array1.value2}} , <h6>posted on {{foo.array1.value3}}</h6>
    </div>
    <div class="collapsible-body">
        <p>{{foo.array2.value2}}</p>
    </div>
    <ul class="collection">
        <li *ngIf="foo.array4.value1>= 1" class="active collection-item">
            <div *ngFor="let p of foo.array4">
                <span class="title">{{p.somevalue}}</span>
            </div>
        </li>
     </ul>
     <div>
            <input type="text" (ngModel)="mymodel.value1" ">
            <button type="submit" (click)="callback(mymodel)">Submit</button>
     </div>
</div>

und meine Rückruffunktion

callback(){
...
this.ObservableService.brodcast(data);
...
}

Also, wenn neue Daten verfügbar sind, möchte ich nicht, dass der gesamte HTML-Code nur @ gerendert wir<ul class="collection"> schon seit<div class="collapsible-header" wird eine Klasse habenactive als der Benutzer es öffnete. Bei Modelländerungen, d. h. aktualisierten Daten, ist jedoch alles zurückgesetzt. Wie kann ich diesen Zustand verwalten? Wenn Sie weitere Informationen benötigen, lassen Sie es mich bitte wissen. Ich bin diesem Artikel gefolgthttp: //blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.htm aber es funktioniert nicht in meinem Fall oder ich mache etwas falsch weiß nicht.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage