如何在angular2中保持模型更改的ui状态？

Question

在 angular2 中保持 UI 状态的最佳方法是什么？ 目前我在单个组件中遇到问题。

所以我正在尝试使用 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，但它不适用于我的情况，或者我做错了什么不知道。

Answer 1

我们在我的工作中一直使用的模式是有一个公共变量来指示是否加载了数据。我们称它为 isLoaded。 isLoaded 初始化为 false，并在数据来自可观察服务时设置为 true。在您的 HTML 标记中，使用 *ngIf 仅显示 isLoaded 设置为 true 后的数据。

在我的工作中，我们还会在 isLoaded 为 false 时显示一个动画加载器组件，让用户知道系统正在等待某些东西，但这有点花哨。

要在您的代码中实现此方法，您可以执行以下操作：

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