Как сохранить состояние пользовательского интерфейса при изменении модели в 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 но это не работает в моем случае, или я делаю что-то не так, не знаю.

 Sasxa16 июн. 2016 г., 19:33
Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно сказать точно, что вы спрашиваете. УвидетьКак спросить страница для уточнения этого вопроса.
 noobProgrammer16 июн. 2016 г., 20:10
@Sasxa привет, проверьте обновленный вопрос

Ответы на вопрос(1)

Шаблон, который мы использовали на моей работе, заключается в наличии публичной переменной, которая указывает, загружены ли данные. Давайте назовем это isLoaded. isLoaded инициализируется как false, и устанавливается в true, когда данные поступают из вашей наблюдаемой службы. В вашей HTML-разметке используйте * ngIf, чтобы показывать данные только после того, как isLoaded имеет значение true.

На моей работе мы также показываем анимированный компонент загрузчика, когда isLoaded имеет значение false, чтобы пользователь знал, что система ожидает чего-то, но это становится немного причудливым.

Чтобы реализовать этот подход в своем коде, вы должны сделать что-то вроде:

Машинопись / Javascript:

public isLoaded: boolean = false;

...

ngInit(): void {
    this.ObservableService.getData.subscribe((val) => {
        this.data= val;
        this.isLoaded = true;
    });

    ...
}

HTML:

<div *ngIf="!isLoaded">
    Loading Data ...
</div>
<div *ngIf="isLoaded">
    <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>
</div>

Ваш ответ на вопрос