我的ng-template标记不等待ngIf异步完成
ng-template是Angular中的一个指令，用于定义可重用的模板片段。它通常与结构性指令（例如ngIf、ngFor）一起使用，以根据特定条件或迭代项动态渲染DOM元素。
在使用ng-template时，ngIf指令默认是同步执行的，即ngIf的条件表达式在页面渲染时会立即判断。如果条件为false，ngIf指令会从DOM中移除ng-template的内容，反之则会渲染ng-template。
然而，有时候我们希望ngIf异步完成后再进行判断和渲染。可以通过使用异步管道async来实现这一目的。
下面是一个例子，演示了如何使用async管道来确保ng-template标记在ngIf异步完成后进行渲染：
<ng-container *ngIf="data$ | async as data">
<ng-template [ngIf]="data">
<!-- 在这里放置ng-template的内容 -->
</ng-template>
</ng-container>在上述例子中，data$是一个Observable对象，使用async管道将其转换为实际的值data。接下来，ngIf指令会根据data的值进行判断，并在条件满足时渲染ng-template的内容。
需要注意的是，data$应该是一个返回Observable对象的方法或属性，以确保ngIf能够订阅并等待数据的到来。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云开发（云函数）：https://cloud.tencent.com/product/scf
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb
- 腾讯云云服务器 CVM：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
- 腾讯云云安全中心：https://cloud.tencent.com/product/ssc
- 腾讯云云点播 VOD：https://cloud.tencent.com/product/vod
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网通信：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动推送：https://cloud.tencent.com/product/umeng_push
- 腾讯云对象存储 COS：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云游戏多媒体引擎 GME：https://cloud.tencent.com/product/gme
- 腾讯云游戏存储 TGWS：https://cloud.tencent.com/product/tgws
- 腾讯云游戏数据分析 GDA：https://cloud.tencent.com/product/gda
相关·内容
我试图在我的菜谱应用程序中将所有者和访客分开，其中所有者可以编辑自己的菜谱，而其他人只能查看它。使用我当前的代码，所有权检查需要一些时间才能完成，同时我还运行了ng-template。我想不出该怎么让它等待。 HTML代码： <!-- If this recipe exists -->
<div *ngIf="recipe$ | async as rec
浏览 20提问于2020-10-14得票数 1
我正在检查数组中是否有任何元素，然后再显示它们。如果没有，则应显示“不可用”消息。subscribe(data => { this.lists = data.data;} 模板： <mat-spinner *ngIf="isLoading" class="mx-auto"></mat-spinner>
<div *ngIf="lists.length > 0;
浏览 48提问于2019-04-01得票数 1
回答已采纳
2回答
我正在尝试根据*ngIf中可观察到的isComplex$的值来显示其中一个头部：<ng-template #ordinaryHeader><&#
浏览 22提问于2018-05-30得票数 2
回答已采纳
在中使用*ngIf有相当好的文档，但是，是否可以使用*ngIf异步变量并对其进行多次检查？类似于：...</div><div *ngIf="users$ | async as users">
<
浏览 0提问于2018-03-15得票数 54
回答已采纳
我目前正面临着通过可观察数据订阅数据的问题。直到订阅数据并将其存储在局部变量(对象数组)中以供显示，同时该组件加载并由此不显示数据，因为它仍在从后端获取数据。我假设这个问题是关于竞态条件(异步)的，有关于如何处理这个问题的线索吗？我正在读取Json数据，它获取'ObjectArray‘中的值，并填充与angular 2组件上的PrimeNG数据表相同的值。
浏览 0提问于2017-07-20得票数 1
1回答
在表角8中添加链接
、、、、
我有一个表和一些列，我有一个“文档”列，可以点击和下载。如何才能使文档名称成为链接？pResizableColumn>{{col.header}} </th> <th>Permessi</th> </ng-template>
<ng-template pTemplate="body&
浏览 6提问于2020-01-28得票数 0
回答已采纳
3回答
我有一个快速搜索框，我想有一个加载动画。我使用ng-template和ngIf来显示/隐藏这个动画。我有一些li的嵌套在同一个div中，它订阅了一个可以使用异步管道来显示结果的搜索结果。当父div上没有*ngIf时，这个异步管道工作得很好，但是当我应用ngIf时，它似乎不再是订阅了。这是一种预期的行为吗？还是我做错什么了？
我<
浏览 0提问于2018-08-22得票数 6
回答已采纳
我有奇怪的问题，变化检测，switchMap和异步管道的角。#loading><app-loader></app-loader></ng-template>
<div *ngIf="sellerProducts$ | async as sellerProducts，在switchMap完成后，角不运行检查。当我用鼠标单击时，视图是更新的，因为角运行ngDoC
浏览 2提问于2017-05-04得票数 2
我正在尝试根据从restful服务收到的响应来填充日历(当前返回日期列表)。 我从组件的ngInit()方法调用restful服务方法。是在日历日期数组填充之前呈现的。]="events" [viewDate]="viewDate" [customTemplate]="Customtemplate" ></angular-calendar-year-view>
<ng-template#Cus
浏览 30提问于2019-06-21得票数 1
回答已采纳
3回答
我有以下关于角7的应用程序： <div *ngIf="post; else empty"> </div><ng-template #empty><&#x
浏览 0提问于2019-03-29得票数 0
2回答
我使用角4作为前端，以Node为后端构建一个应用程序。前端将从SQL数据库获取数据并显示表单。由于此提取在部署时可能需要一段时间，所以我希望在获取数据时添加一条“请等待”消息。现在，我使用异步管道、主题和可观察性以及一个简单的超时函数来测试它的工作性能。我试过这个密码。</h3>
但是“请等待”消息没有出现，只有2秒后的表单。就是！操作人员在使用管道时不适用？我设法用ng模板解决了这个问题，但是
浏览 2提问于2018-01-23得票数 15
回答已采纳
1回答
我有这个密码<div *ngIf="(imgDoc$ | async) ?.photoURL; then DisplayImgContainer;"></div></div>
* ngIf的<em
浏览 0提问于2018-05-01得票数 0
2回答
在我的组成部分中有以下内容：getAllTurbinesStat(id:string) {
this.allStats=s; } <div class="card-body align-items-centerd-flex justify-content-center">
浏览 3提问于2020-11-20得票数 0
回答已采纳
我正在尝试使用*ngFor循环遍历一个对象数组。我意识到我不能在同一个元素上使用*ngFor和*ngIf，它会返回一个错误。相反，我尝试将我的*ngIf粘贴到列表项的内容上。但是现在，我得到了一堆空列表项，它们被创建并显示在我的视图页面上。
我不想将*ngFor放在<ul>元素上，因为这样会创建一组<ul>元素，每个元素中都有一个列表项。我希望你们中
浏览 0提问于2016-03-04得票数 5
回答已采纳
3回答
我有一个.html文件来显示一些值。我在标记中添加了一个带有"*ngIf“的条件，以找到一个以"Rechercher .”结尾的值。也许我找不到让它工作的方法。我尝试了几种方法，现在我只有一个值为true的布尔值，以确定是否可以在模板之间切换，但他仍然不会打开其中的一个。*ngIf="isTrue else disabled_lock
浏览 3提问于2020-01-24得票数 0
回答已采纳
3回答
你能帮我修一下ng4的代码吗？{ this.lastName = lName; }以下是我的在添加了条件之后，我遇到了以下问题：
<p *ngFor=
浏览 1提问于2017-07-29得票数 1
回答已采纳
1回答
我在模板中使用异步管道。如果您看到我下面的代码，我将在两个不同的地方使用异步管道。因为它在两个地方使用，所以它被订阅了两次，并且有两个http调用。如何使用异步管道避免这一次调用？我能够在ngOnInit()中通过订阅来实现不带异步的功能，但是在我的例子中，我想知道如何使用单异步管道来实现？<div class="flex-group space-
浏览 3提问于2022-06-13得票数 0
我在工具提示中显示了一个数据数组，所以我使用了一个模板。我的代码看起来像这样： <ng-template #ToolTipTemplate></ng-template>
<span [ngbTooltip]="
浏览 42提问于2017-06-22得票数 5
回答已采纳
1回答
如何触发角8自定义链接点击的方法
、、、、
我有一个场景，我需要从TS创建一个标记，如果有人单击标记，我需要捕获单击事件。onclick="update()">click me</a>`; console.log('click me is clicked')在这里，只要单击我，我就需要触发更新方法。链接到stackblitz
请让我知道如何实现it.Thanks
浏览 4提问于2022-07-21得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
