如何在Angular2的模型变化上维持UI状态

Question

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

所以我试图使用NGIF维护课程，但不知道如何将这种情况放在NGIF上更改类别。

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

，还有其他方法可以在Angular2中维持状态吗？但是，我什至尝试使用可观察的服务，但数据首先出现，以后渲染，因此无法正常工作，我可以将任何功能称为OnViewUpdate完整等吗？

？

update

我的可观察服务

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/02/angular-2-change-detection-explectain.html，但它在我的情况下不起作用，或者我做错了什么，不知道。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</p>

Answer 1

我们在工作中使用的模式是具有一个公共变量，该变量指示是否加载了数据。我们称其为加载。IS负载初始化为false，并在数据来自可观察的服务时设置为True。在您的html标记中，使用 *ngif仅在加载后仅显示数据。

在我的工作中，我们还显示一个动画加载器组件是错误的，以便让用户知道系统正在等待某些东西，但这变得有些幻想。

要在代码中实现此方法，您将执行类似：

打字稿/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>