Question

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

所以我试图使用ngif维护课程，但不知道如何将这个条件改为ngif上的课程。

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

还有其他方法可以在angular2中维持状态吗？但是我甚至尝试使用可观察的服务，但是数据首先出现并且稍后呈现以便不起作用，是否有任何函数可以调用onviewupdate完成等等？

更新

我的Observable服务

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时，我们还会显示一个动画加载程序组件，让用户知道系统正在等待某些东西，但这有点花哨。

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

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

如何在angular2中保持模态变化的ui状态？

1 个答案: