[英]Angular : reload a html block when new data come from observable
Under my angular app, I've this component view:在我的angular应用程序下,我有这个组件视图:
component.html:组件.html:
<div *ngIf="MY_VARIABLE==1" class="ScrollStyle2">
<div style="display: none;">
<app-button-config-file [dataPtfName]="nouveau_data"></app-button-config-file>
</div>
<div class="container-fluid">
<div class="row">
<div *ngFor="let content of datasalle.PTF_CONTENT">
<div class=" col-sm-6" *ngIf="content.VERSION.includes(strVersion)">
<app-cards [content]="content" [dataPtf]="nouveau_data"></app-cards>
</div>
</div>
</div>
</div>
</div>
As you can see, Entire block is wrapped with an *ngIf
which depends on varibale " MY_VARIABLE
"如您所见,整个块都用一个
*ngIf
包裹,它取决于变量“ MY_VARIABLE
”
My purpose is to reload this entire html block (all the div ) whenever " MY_VARIABLE
" changes,我的目的是在“
MY_VARIABLE
”更改时重新加载整个 html 块(所有 div ),
To note:要注意:
MYVARIABLE
is changing depending on a service observable:: MYVARIABLE
取决于服务可观察的变化::
component.ts:组件.ts:
getData(){
this.myservice.mySubject.susbscribe((data) => {
this.MY_VARIABLE = data
})
}
Suggestions??建议??
then simply use this.myservice.mySubject
instead of MY_VARIABLE
in the template.然后只需在模板中使用
this.myservice.mySubject
而不是MY_VARIABLE
。 If you need its value - simply use as
there too.如果您需要它的价值 - 也只需使用
as
there。
<div *ngIf="myservice.mySubject | async as MY_VARIABLE" class="ScrollStyle2">
<div style="display: none;">
<app-button-config-file [dataPtfName]="nouveau_data"></app-button-config-file>
</div>
<div class="container-fluid">
<div class="row">
<div *ngFor="let content of datasalle.PTF_CONTENT">
<div class=" col-sm-6" *ngIf="content.VERSION.includes(strVersion)">
<app-cards [content]="content" [dataPtf]="nouveau_data"></app-cards>
</div>
</div>
</div>
</div>
</div>
if this.myservice.mySubject
should be called at some point (not always).如果
this.myservice.mySubject
应该在某个时候被调用(不总是)。 then you can use Subject
instead of MY_VARIABLE
.那么您可以使用
Subject
而不是MY_VARIABLE
。
MY_VARIABLE$ = new Subject();
getData(){
this.myservice.mySubject.subscribe((data) => {
this.MY_VARIABLE$.next(data);
});
}
and the same thing in template as above but with MY_VARIABLE$
.和上面的模板一样,但使用
MY_VARIABLE$
。
You can use ReplaySubject(2) to store old and new values which you can compare and load if different.您可以使用 ReplaySubject(2) 存储旧值和新值,如果不同,您可以比较和加载它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.