我有一个使用 Angular 条件模板逻辑来显示动态内容的模板。条件的值根据异步函数的响应而变化。函数返回值后，我想附加一个新元素。问题是当我这样做时，新元素会在模板更改之前附加，从而有效地删除附加的元素。
看看这个堆叠闪电战，看看一个活生生的例子：https://stackblitz.com/edit/angular-aty1zz
app.component.ts
export class AppComponent implements AfterViewInit {
private hasAsyncResponded;
private p: HTMLParagraphElement;
async ngAfterViewInit() {
this.hasAsyncResponded = await this.getAsyncThing();
this.p = document.createElement('p');
this.p.textContent = 'foo bar baz';
document.getElementsByClassName('my-div')[0].appendChild(this.p);
// debugger;
}
get shouldShowTemplateTwo(): boolean {
return this.hasAsyncResponded ? true : false;
}
async getAsyncThing(): Promise<boolean> {
const promise: Promise<boolean> = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(true);
}, 3000);
});
return promise;
}
}
app.component.html
<ng-container *ngIf="shouldShowTemplateTwo; then templateTwo else templateOne"></ng-container>
<ng-template #templateOne>
<div class="my-div">
<h1>Template 1</h1>
</div>
</ng-template>
<ng-template #templateTwo>
<div class="my-div">
<h1>Template 2</h1>
</div>
</ng-template>
在 app.component.ts 的第 9 行，我定义了一个名为hasAsyncResponded的变量，默认情况下它是伪造的(未定义(。
在第 13 行，我等待来自异步函数的响应并将其存储为hasAsyncResponded的值。
在第 20 行，我创建了一个 getter，模板使用它来有条件地显示所需的ng-template(app.component.html：第 1 行(。
在 promise 解析后，hasAsyncResponded的值设置为 true，这将切换ng-template。同样在承诺解决之后，我们到达 app.component.ts 的第 16 行，它将一个新段落附加到模板中。
由于承诺已经解决，并且在附加新段落之前hasAsyncResponded的值已更新，我希望新段落将附加到更新的模板(#templateTwo(。但是，该段落将附加到以前的模板(#templateOne(。如果在 app.component.ts 的第 17 行取消注释调试器，则可以看到这一点。当调试器暂停代码执行时，#templateOne与追加的段落一起可见，在恢复代码执行后将显示#templateTwo。
如何将段落附加到正确的模板中？我想也许我只需要在附加新段落之前检测更改，但这并不能解决问题。
这就是异步管道的用途，将 promise 分配给组件上的属性，并在模板中使用异步管道。
<ng-container *ngIf="yourPromise | async; then templateTwo else templateOne">
无需订阅 TypeScript 中的承诺
我最终决定我把问题复杂化了。
我创建了一个新的属性shouldShowTemplateTwo，该属性默认为 false，并在等待的承诺解析时设置为 true。