如何在angular2中的模型更改时保持ui状态? [英] how to maintain ui state on model change in angular2?

问题描述

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

what is the best way to maintain UI state in angular2? currently i am having problem within single component.

所以我正尝试使用ngif维护类，但不知道如何设置该条件来更改ngif的类.

so i am trying to maintain class using ngif but dont know how to put that condition to change class on ngif.

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

还有其他方法可以在angular2中保持状态吗? 但是我什至尝试使用可观察的服务，但是数据先出现然后再渲染，因此无法正常工作，有没有我可以调用onviewupdate complete等功能?

and is there any other way to maintain the state in angular2? however I even tried to use observable services but data comes first and renders later so not working , is there any function i can call onviewupdate complete etc??

更新

我的可观察服务

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 ，但在我的情况下不起作用，或者我做错了事，不知道.

so when new data is available i dont want whole html to render just <ul class="collection"> since <div class="collapsible-header" will have a class active when user opened it . but on model changes i.e. updated data is available everything resets. so how can i manage this state? If you need any more details please let me know . I followed this article http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html but its not working in my case or i am doing something wrong dont know.

推荐答案

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

The pattern we've been using at my job is to have a public variable that indicates whether data is loaded. Let's call it isLoaded. isLoaded is initialized to false, and set to true when the data comes from your observable service. In your HTML markup, use *ngIf to only show the data after isLoaded is set to true.

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

At my job, we also show an animated loader component when isLoaded is false, to let the user know the system is waiting on something, but that is getting a little fancy.

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

To implement this approach in your code, you would do something like:

TypeScript/Javascript:

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>

这篇关于如何在angular2中的模型更改时保持ui状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！