Как сохранить состояние пользовательского интерфейса при изменении модели в angular2?
Каков наилучший способ поддерживать состояние пользовательского интерфейса в angular2? В настоящее время у меня проблемы в рамках одного компонента.
поэтому я пытаюсь поддерживать класс с помощью ngif, но не знаю, как поставить это условие, чтобы изменить класс на ngif.
*ngif="uiState=desired.elementId" // how to set class here?
и есть ли другой способ сохранить состояние в angular2? Тем не менее, я даже пытался использовать наблюдаемые сервисы, но данные появляются первыми, а потом отображаются, поэтому не работают, есть ли функция, которую я могу вызвать onviewupdate complete и т. д. ??
ОБНОВИТЬ
мой наблюдаемый сервис
this.ObservableService.getData.subscribe((val) => {
this.data= val;
});
мой 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>
и моя функция обратного вызова
callback(){
...
this.ObservableService.brodcast(data);
...
}
поэтому, когда новые данные доступны, я не хочу, чтобы весь HTML отображался просто<ul class="collection">
поскольку<div class="collapsible-header"
будет классactive
когда пользователь открыл его. но при изменении модели, то есть доступны обновленные данные, все сбрасывается. так как я могу управлять этим состоянием? Если вам нужно больше деталей, пожалуйста, дайте мне знать. Я следил за этой статьейhttp://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html но это не работает в моем случае, или я делаю что-то не так, не знаю.