我的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

相关·内容

Angular ng-template vs ng-container

要解决该问题，我们可以使用的标准语法（非*ngIf 语法糖）： Div one Div two 问题是解决了但我们不再使用 * 语法糖语法，这样会导致我们代码的不统一。...要解决这个问题，我可以就利用 ng-container ：中的内容不会显示。...最后我们来总结一下和的区别：：使用 * 语法糖的结构指令，最终都会转换为或 <template

2.1K2 0

Angular 表单2--响应式表单, 处理异步数据

上一节中我们定义了一个响应式表单，其中表单数据是在定义的时候就初始化好的，但是很多时候数据需要异步获取，比如打开一个编辑页面，需要请求HTTP拿到数据。...根据数据修改表单中字段的值，最终体现在页面上。我们改造上一节的例子，成为异步获取数据。...Observable 这里我们不订阅，我们在模板中使用 async pipe 和 if else 语句实现有条件的显示表单 tap(user => this.form.patchValue...form.valid">Save Profile Loading User...... 你会发现页面打开后一开始显示Loading User...过了大概2s后文字消失并显示表单。

2.8K3 0

【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild

有条件的内容投影中文网的描述: 如果你的组件需要_有条件地_渲染内容或多次渲染内容，则应配置该组件以接受一个 ng-template 元素，其中包含要有条件渲染的内容。...在这种情况下，不建议使用 ng-content 元素，因为只要组件的使用者提供了内容，即使该组件从未定义 ng-content 元素或该 ng-content 元素位于 ngIf 语句的内部，该内容也总会被初始化...使用 ng-template 元素，你可以让组件根据你想要的任何条件显式渲染内容，并可以进行多次渲染。在显式渲染 ng-template 元素之前，Angular 不会初始化该元素的内容。...使用ng-container定义我们的投影区块使用ngTemplateOutlet指令来渲染ng-template元素。通过内置的动态指令*ngIf来控制是否渲染投影。...: ContentDirective; } 通过日志可以看到我们在切换容器组件的expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngIf虽然在页面看不到渲染的内容,但组件实实在在被初始化过了

5343 0

ng-content 中隐藏的内容

如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。...为什么不按照我们的预期运行？ The explanation 不会 “产生” 内容，它只是投影现有的内容。...性能的原因更为重要。因为 ng-content 只是移动元素，所以可以在编译时完成，而不是在运行时，这大大减少了实际应用程序的工作量。...The solution 为了让包装器能够控制其子元素的实例化，我们可以通过两种方式完成：在我们的内容周围使用元素，或者使用带有 “*” 语法的结构指令。...为简单起见，我们将在示例中使用语法，我们的新应用程序如下所示： </

2.7K3 0

NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来

---- 问题1：template标签已经废弃了信息来源：启动的时候控制台有提示，官方日志也有说解决方案：全局搜索，替换 ---- 问题2：动画已经独立出一个专门的模块信息来源：官方文档，及手动不信邪尝试【动画的一些引入已经不包含在@angular/core】了；解决方案：手动搜索引入动画的页面，还好之前有过分离一下...; this.isExpend(evt.url); }); // 修正 -- 需要给传入参数指定对应的类型； // 我是特意去打印出来，有什么鬼，一一指定，，懒的可以直接指定:any // 获取当前...** ---- NG4的亮点新的视图引擎，据说能让渲染更快加强了*ngIf,里面可以写else了,这里直接拿官方的写法Loading...... {{ user.name }} 复制代码

4501 0

Angular核心概念：数据绑定

… 举例： html文件此区域内容仅为付费用户可见 =18; else forChildren"> 此处是成年的家长看的内容...... 此处是未成年的宝宝看的... ts文件： isPayingUser = true;//该用户是否为付费用户 //isPayingUser...this.myStyleObj.backgroundColor ='#833', this.myStyleObj['border-color']="522" } } 注意：但是我们不推荐这样写

3.5K1 0

Angular DOM 抽象概述

off" name="q" tabindex="-1" type="url" jsaction="mousedown:ntp.fkbxclk" style="opacity: 0;"> 在页面完成渲染后...模板元素是一种机制，允许包含加载页面时不渲染，但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。...，Angular 为我们开发者提供了元素，在 Angular 内部它主要应用在结构指令中，比如 *ngIf、*ngFor 等。...ng-template>元素会被编译为<!...，可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令，比如： <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons

3.5K3 0

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

完成client.service.ts: import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular...我这里还没有数据, 如果有数据的话, 将会显示一个table, header是黑色的....然后把表单都完成 add-client.component.html: 名字是必填的姓是必填的 <div *ngIf="clientLastName.errors.minlength

4.3K5 0

Angular开发实践（八）：使用ng-content进行组件内容投射

如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。...性能的原因更为重要。因为 ng-content 只是移动元素，所以可以在编译时完成，而不是在运行时，这大大减少了实际应用程序的工作量。...解决方法为了让组件能够控制投射进来的子组件的实例化，我们可以通过两种方式完成：在我们的内容周围使用元素及 ngTemplateOutlet，或者使用带有 "*" 语法的结构指令...为简单起见，我们将在示例中使用语法。...中： </ng-template

2.9K8 1

【Appetite】ionic3实录（六）首页实现

不知道一个小时能写完不，赶上班… 仍然是先上UI设计图： ?...百度食物图片如果是远程地址则先保存地址，如果是放本地的就在src/assets里面找个地方放，呆会要把地址作为数据一部分，我这选择存放本地。...接着我们执行命令新建一个HomeProvider用来统一管理首页的数据处理方法（这里按页面逻辑来划分的，当然你也可以按业务类型来划分）： ionic g provider home 命令执行完成，打开文件写入一个方法...三、安装视频播放组件用的是videogular2，可参考我另一篇文章：《【技巧】ionic3视频播放》四、安装swiper组件 npm install swiper --save 四、实现首页打开...此外getFriendNews没有后续操作，所以异步调用省掉return。

1.1K4 0

开源异步并行框架，完成任意的多线程编排、阻塞、等待、串并行结合、强弱依赖

Future是java.util.concurrent.Future，是Java提供的接口，可以用来做异步执行的状态获取，它避免了异步任务在调用者那里阻塞等待，而是让调用者可以迅速得到一个Future对象...) throws Exception { //do your job } }); 我们可以理解为bootstrap.connect这一步是一个耗时操作，我不想在那等待它执行完毕...据此，我们拆分出几个角色，master主线程，调度器（发起异步调用），worker（异步工作线程）。然后就是将他们组合起来，完成各种异步回调，以及每个worker的正常、异常、超时等的回调。...完成了这样的小demo，立马从netty的复杂中恢复了过来实现一个简单带回调、超时的异步任务 public class BootstrapNew { public static void...还好，CompleteableFuture提供了allOf这个方法，它可以让你传入多个future，并且能够等待这多个future都完成时再统一返回。见下图代码。

1.7K1 0

在前端中理解MVC服务之 Angular篇(完结)

<s *ngIf..." (focusout)="edit(user, age)" > {{ user.age...}} {{ user.age }} <button class=...但是，我们注意到，前几部分中的许多 DOM 操作代码已通过 Angular 得到解决，它们提供了两个结构指令，如 @ ngFor 和 _ ngIf，它们允许从模板本身轻松操作 DOM。...我建议你从第一篇与JavaScript相关的帖子开始，了解所使用的体系结构。下一步是通过应用 TypeScript（在第二篇文章中）来强化代码，最后查看此文章中的代码已适应框架。

4.1K2 0

高级 Angular 组件模式 (5)

目标在视图模板内，获取一个指令的引用。实现模板引用变量是获取某个元素、组件或者指令引用的一种方式，这个引用可以在当前的视图模板中的任何地方使用。...Note: 请注意作用域的问题，如果你使用或者是一个结构性指令，比如*ngIf或者*ngFor，它会在这个模板上创建一个新的作用域，之后在其内部声明的模板引用变量无法在该模板作用域以外使用...// app.component.html // someDiv is an HTMLDivElement 成果 Note: 在stackblitz中，我通过打印模板引用变量所指向的类的名字...stackblitz.com/edit/adv-ng-patterns-05-template-ref-variables 译者注这篇文章作者关于模板引用变量，仅仅介绍了关于如何声明和在视图模板中如何使用，我在这里再补充一些...在类内部获取模板引用变量所指向的引用是通过使用ViewChild装饰器完成的，比如上述文章中的第二个例子: @Component({ selector: 'my-app', template:

6392 0

Angular 2 + 折腾记：(8) 动手写一个不怎么靠谱的上传组件

---- 所具有的功能支持的图片格式(不传参则使用默认参数) 支持的图片大小图片上传之前会被压缩(前端) -- 异步加载进来上传过程会显示loading(loading组件)--就一些css3样式...color: #37c2dd; } } } .res-img { width: 100%; } ---- mit-image-upload.loader.service.ts -- 异步加载前端图片压缩的脚本...用到的是一个github上库：localResizeIMG; 我这里下载了放在cdn上。。...，我放在七牛上了 const p = new Promise((resolve, reject) => { const script = document.createElement...( scope.type ); if (e && scope.type.indexOf(filetype) === -1) { this.uploadDesrc = '图片格式不匹配

9721 0

AngularDart4.0 指南- 显示数据顶

当你完成后，它应该是这样的：lib/app_component.dart import 'package:angular/angular.dart'; @Component( selector: '...更准确地说，重新显示是在与视图相关的某种异步事件之后发生的，例如按键，计时器完成或对HTTP请求的响应。请注意，您不要调用new来创建AppComponent类的实例。...它将元素（及其子元素）标记为“repeater模板”： {{ hero }} 不要忘记* ngFor中的主要星号... 不要忘记* ngIf中的星号（*）。这是语法的重要组成部分。在“模板语法”页面的ngIf部分阅读有关ngIf和*的更多信息。...Dart类，用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

5.3K1 0

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

这就需要一个滤波器的处理 .debounceTime(500)，我们不去处理 500 毫秒内的变化，而是等待其输入停顿时再发送数据。...Async 管道到目前为止，我们还没有进行对 Observable 的订阅，如果不订阅的话，写的再漂亮的语句也不会执行的。...所幸的是，Angular 提供了对于响应式编程非常友好的设计，我们完全可以不在代码中做订阅或取消订阅的动作。那么问题来了，不订阅的话，值怎么获得呢？答案是 Async 管道。...$ 订阅后的值，那么 | async 是说 computed$ 是一个 Observable，请对他采用异步处理，即初始化时自动的订阅以及在组件销毁时自动取消订阅。...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了，如果你曾经使用过 Angular 就知道，原来我们是得写两个 ngIf 来完成类似的功能的。

5.3K1 0

设计思路

Web Terminal 现在都流行Web操作一切，于是我们又实现了Web Terminal，供用户直接在线链接服务器，这里实现是用了Tornado来完成的，Tornado实现WebSocket特别简单...WebSocket 的asgi的服务器，主要处理WebSocket请求 celery - 后台异步任务分发处理 -celery_ansible/celery_default 简单、灵活且可靠的，...处理大量消息的分布式系统；专注于实时处理的异步任务队列，同时也支持任务调度 flower - 负责监控 celery worker执行情况 Web Terminal 主要通过Luna，koko...前端通过 rle.js 文件完成位图的解压缩 webterminal 前端由luna 里的html5 canvas 和js 渲染出来 Luna 使用了 "guacamole-common-js": "1.1.0...jms 操作录像回放操作的录制: ssh 是由koko基于websocket data完成; rdp 是由Guacamole API 完成操作的回放：由 luna进行 replay 展示的，对ssh

8062 0

高级 Angular 组件模式 (6)

我在之前写的文章提及过，TemplateRefs就是Angular中的Render Props，同时我会在这篇文章中列举一个简单易用的例子。...不过你可能会在项目中更频繁地使用，但是在网上你可以很容易的搜索到关于TemplateRef的知识，因为会给你提供很多html5中的...成果 stackblitz演示地址译者注这种组件设计模式按我个人的理解，其实是依赖倒置原则在视图渲染层的一种延伸，为什么这么说呢？...正文中仅列举了一个简单的例子中，我这里在简单提及一个实际工作可能会用到的例子，就是表单校验的错误提示组件，一般前端组件设计但凡涉及表单，都会是十分复杂的，更不用说校验这种灵活性很高的功能了。...为了适应表单校验的灵活性，我们使用这种模式会事半功倍，提供校验信息的组件仅仅声明渲染表单错误提示信息需要设计的状态变量即可，比如dirty、touched等等，对于错误信息的文案及样式，统统交由错误提示组件的使用者完成

8311 0

高级 Angular 组件模式 (6)

1.2K2 0

Angular 服务

英雄指南的 HeroesComponent 目前获取和显示的都是模拟数据。本节课的重构完成之后，HeroesComponent 变得更精简，并且聚焦于为它的视图提供支持。...它把这个类标记为依赖注入系统的参与者之一。HeroService 类将会提供一个可注入的服务，并且它还可以拥有自己的待注入的依赖。目前它还没有依赖，但是很快就会有了。...把它标记为一个 HeroService 的注入点。...上一个版本把英雄的数组赋值给了该组件的 heroes 属性。这种赋值是同步的，这里包含的假设是服务器能立即返回英雄数组或者浏览器能在等待服务器响应时冻结界面。...新的版本等待 Observable 发出这个英雄数组，这可能立即发生，也可能会在几分钟之后。

3.3K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

我的ng-template标记不等待ngIf异步完成

相关·内容

Angular ng-template vs ng-container

Angular 表单2--响应式表单, 处理异步数据

【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild

ng-content 中隐藏的内容

NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来

Angular核心概念：数据绑定

Angular DOM 抽象概述

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

Angular开发实践（八）：使用ng-content进行组件内容投射

【Appetite】ionic3实录（六）首页实现

开源异步并行框架，完成任意的多线程编排、阻塞、等待、串并行结合、强弱依赖

在前端中理解MVC服务之 Angular篇(完结)

高级 Angular 组件模式 (5)

Angular 2 + 折腾记：(8) 动手写一个不怎么靠谱的上传组件

AngularDart4.0 指南- 显示数据顶

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

设计思路

高级 Angular 组件模式 (6)

高级 Angular 组件模式 (6)

Angular 服务

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐