如何解决如何在Angular中超时后更新html页面视图
我正在尝试根据条件显示routerlink名称。如果条件为真，我想显示div部分routerLink名称。如果我检查<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0,SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="35px" height="35px" viewBox="0 0 35 35" xml:space="preserve">
<g>
<path d="M25.302,0H9.698c-1.3,0-2.364,1.063-2.364,2.364v30.271C7.334,33.936,8.398,35,9.698,35h15.604
c1.3,2.364-1.062,2.364-2.364V2.364C27.666,1.063,26.602,25.302,0z M15.004,1.704h4.992c0.158,0.286,0.128,0.287
c0,0.158-0.128,0.286-0.286,0.286h-4.992c-0.158,0-0.286-0.128-0.286-0.286C14.718,1.832,14.846,1.704,15.004,1.704z M17.5,33.818
c-0.653,0-1.182-0.529-1.182-1.183s0.529-1.182,1.182-1.182s1.182,0.528,1.182,1.182S18.153,33.818,17.5,33.818z M26.021,30.625
H8.979V3.749h17.042V30.625z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>，首先显示{{isNameAvailable}}，然后在false得到值后显示this.names。组件true中的方法是异步getDetails()，它是在html模板渲染后获取值的。因此，该routerLink不会显示。因此，我想在一段时间后显示div部分。 （这就是我的解决方案）不知道是否还有其他解决方案。
这是我的html文件代码。
this.names这是我的component.ts文件
<main class="l-page-layout ps-l-page-layput custom-scroll bg-white">
{{isNameAvailable}}
<div class="ps-page-title-head" >
<a *ngIf ="isNameAvailable === true" [routerLink]="['/overview']">{{Name}}
</a>
{{Name}}
</div>
</main>
names= [];
isNameAvailable = false;
ngOnInit() {
this.getDetails()
}
getDetails() {
this.route.params.subscribe(params => {
this.names.push(params.Names);
console.log(this.names);
this.getValues().then(() => {
this.isNameAvailable = this.checkNamesAvailability(this.names);
console.log(this.isNameAvailable);
});
});
}
resolveAfterSeconds(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
},900);
});
}
checkNamesAvailability(names) {
console.log(names);
return names.includes('Sandy');
}
async getValues() {
await this.resolveAfterSeconds(900);
}
也是如此。我该怎么办？
解决方法
1.HTML isNameAvailable中没有任何内容可以显示，因为Name变量中没有任何赋值。
2。最好使用内置角度async管道， 当您想显示可观察对象的返回值时。
3。使用*ngIf指令时，您可以跳过*ngIf ="isNameAvailable === true"检查，因为变量是布尔型，您只要写*ngIf ="isNameAvailable"，它也会检查{{1} }，但未定义
- 之所以起作用，是因为
null指令负责检查和呈现UI，您可以通过调用函数并在控制台中打印和应答来查看该指令检查了多少次。
是否有可能在组件注释中设置了changeDetection: ChangeDetectionStrategy.OnPush docs？这可以解释这种行为。有了它，Angular运行更改检测仅针对组件@Input()的更改，并且由于您的情况不存在，因此它没有运行更改检测，这就是为什么模板未更新的原因。您可以在该行中添加注释，以检查是否是造成此问题的原因。您始终可以通过ChangeDetectorRef.detectChange() docs手动运行更改检测，这可以解决您的问题
constructor(private cd: ChangeDetectorRef) {}
...
getDetails() {
this.route.params.subscribe(params => {
...
this.getValues().then(() => {
this.isNameAvailable = this.checkNamesAvailability(this.names);
this.cd.detectChanges(); // solution
console.log(this.isNameAvailable);
});
});
}
此stackblitz显示了此错误和解决方案。您可以阅读有关更改检测here
的更多信息 ,您可以将RxJS timer函数与switchMap运算符配合使用，而不是Promise在特定时间后触发某些内容。
尝试以下
import { Subject,timer } from 'rxjs';
import { takeUntil,switchMap } from 'rxjs/operators';
names= [];
isNameAvailable = false;
closed$ = new Subject();
ngOnInit() {
this.getDetails()
}
getDetails() {
this.route.params.pipe(
switchMap((params: any) => {
this.names.push(params.Names);
return timer(900); // <-- emit once after 900ms and complete
}),takeUntil(this.closed$) // <-- close subscription when `closed$` emits
).subscribe({
next: _ => {
this.isNameAvailable = this.checkNamesAvailability(this.names);
console.log(this.isNameAvailable);
}
});
}
checkNamesAvailability(names) {
console.log(names);
return names.includes('Sandy');
}
ngOnDestroy() {
this.closed$.next(); // <-- close open subscriptions when component is closed
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。