首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何设置如果变量的值为空,则等待。我用的是angular 4

在Angular 4中,可以使用条件语句和异步操作来实现当变量的值为空时的等待设置。

首先,你可以使用ngIf指令来检查变量的值是否为空。ngIf指令根据条件是否为真来添加或移除DOM元素。如果变量的值为空,可以使用ngIf指令来隐藏或显示等待的UI元素。

代码语言:txt
复制
<div *ngIf="variable === null">
  等待...
</div>

上述代码中,当变量variable的值为null时,等待的UI元素会被显示出来。

接下来,如果你需要等待变量的值发生变化,可以使用异步操作来实现。Angular 4中提供了Observable和Promise两种异步操作的方式。

使用Observable的示例代码如下:

代码语言:txt
复制
import { Observable } from 'rxjs/Observable';

// 创建一个Observable对象
const variable$ = new Observable(observer => {
  // 模拟异步操作
  setTimeout(() => {
    observer.next(variable); // 发送变量的值
    observer.complete(); // 完成Observable
  }, 1000);
});

// 订阅Observable
variable$.subscribe(value => {
  // 当变量的值发生变化时执行的代码
  // 可以在这里更新UI或执行其他操作
});

上述代码中,variable$是一个Observable对象,通过next()方法发送变量的值。在订阅Observable时,可以通过回调函数处理变量值的变化。

使用Promise的示例代码如下:

代码语言:txt
复制
// 创建一个Promise对象
const variablePromise = new Promise(resolve => {
  // 模拟异步操作
  setTimeout(() => {
    resolve(variable); // 解析变量的值
  }, 1000);
});

// 使用Promise对象
variablePromise.then(value => {
  // 当变量的值发生变化时执行的代码
  // 可以在这里更新UI或执行其他操作
});

上述代码中,variablePromise是一个Promise对象,通过then()方法处理变量值的变化。

在Angular 4中,你可以根据具体的需求选择使用Observable或Promise来实现等待变量值为空的设置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 模板语法二 顶

如果名称未能匹配已知指令元素事件或输出属性,Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定中,Angular目标事件设置了一个事件处理程序。...对象每个键都是一个CSS类名字; 如果应该添加类,true,如果应该删除则为false。...在大多数情况下,Angular将引用变量设置声明元素。...和null属性路径 Angular安全导航运算符(?.)与Dart条件成员访问运算符一样,防止属性路径中便利方法。 在这里,如果currentHero防止视图呈现失败。...不幸,当currentHero时,应用程序崩溃。 你可以*ngIf来解决这个问题。 <!

29.9K20

Angular 从入坑到挖坑 - 组件食用指南

,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插表达式 插表达式可以将组件中属性或者模板上数据通过模板表达式运算符进行计算...模板表达式变量来源 模板本身变量 指令上下文变量 组件成员信息(属性 or 方法) 在使用模板表达式时,如果变量名在多个来源中都存在的话,模板变量最优先,其次指令上下文变量,最后组件成员...text-red、bg-blue 都是 css 类名,如果想要在指定元素上添加该类, css 类名对应 true,反之则为 false NgStyle:用来设置元素多个内联样式,如果设置一个内联样式...非断言运算符 在 tsconfig.json 中启用 strictNullChecks 属性,typescript 将会强制开启严格检查,在这种模式下,所有定义了类型属性不允许赋值 null...非断言运算符用来告诉编译器对特定属性不做严格校验,当属性 null or undefined 时,不抛错误。

15.8K30

Angular快速学习笔记(3) -- 组件与模板

小结 带有双花括号表达式 (interpolation) 来显示一个组件属性 ngFor 显示数组 一个 TypeScript 类来组件描述模型数据并显示模型属性 ngIf...{{title}} changed 表达式中上下文变量由模板变量、指令上下文变量如果有)和组件成员叠加而成。...如果你要引用变量名存在于一个以上命名空间中,那么,模板变量最优先,其次指令上下文变量,最后组件成员。...并把它设置组件 isUnchanged 属性的当前,但你直觉!isUnchangedtrue时,button增加disabled属性。...在这种模式下,有类型变量默认不允许 null 或 undefined 如果有未赋值变量,或者试图把 null 或 undefined 赋值给不允许变量,类型检查器就会抛出一个错误 Angular

15.2K30

AngularDart 4.0 高级-结构指令 顶

只要*ngIf设置一个字符串。 您将在本指南中学习到星号(*)一种便利符号,字符串一种微型语法,而不是通常模板表达式。...Angular将它们设置上下文index和odd 属性的当前。 没有指定let-hero上下文属性。 它原意隐含。...Angular设置let-hero上下文$implicit属性,NgFor已经当前迭代hero初始化了它。 API指南描述了额外NgFor指令属性和上下文属性。...NgIf能否取消NgFor效果? 如果这样(并且看起来应该如此),Angular应该如何概括取消其他结构指令能力? 这些问题没有简单答案。 禁止多项结构性指令使得它们没有实际意义。...如果条件假并且视图尚未创建,请告诉视图容器从模板创建嵌入视图。 如果条件真并且当前显示视图,清除且销毁视图容器。 没有人读取myUnless属性,因此它不需要getter。

16K20

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

angular英文字面意思:有角; 角测量 AngularJS协助搭建单页面工程(SPA)开源前端框架。它通过MVC模式使得开发与测试变得更容易。...items变量['A','B'],输出结果: Header A Body A </div...这个指令有三种使用方式,这三种方式取决于表达式计算结果: 如果表达式结果字符串,字符串使用空格分隔一个或多个类名。...如果表达式结果一个数组,数组中每个元素使用空格分隔一个或多个类名字符串。 如果表达式结果一个对象,对象中每个key-value中如果键值真时键名作为类名。...练习:购物车 1、双向绑定集合中数据 2、执行移除事件 3、隔行换色、使用angularJS完成 4、点击数量与小计时进行排序(选做) 三、区分UI和控制器职责 控制器职责: 1、应用中模型设置初始状态

15.3K100

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

ngOnChanges:当Angular设置其接收当前和上一个对象数据绑定属性时响应。 ngOnInit:在第一个ngOnChange触发器之后,初始化组件/指令。...什么延迟加载?如何Angular 2中启用延迟加载? 大多数企业应用程序包含各式各样用于特定业务案例模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大性能开销。...在子模块路由中,将路径指定为空字符串“”,也就是路径。RouterModule.forChild会再次采用路由数组子模块组件加载并配置路由器。...其中一些: 避免组件使用/注入动态HTML内容。 如果使用外部HTML,也就是来自数据库或应用程序之外地方,那么就需要清理它。 不要将外部网址放在应用程序中,除非它是受信任。...如果服务器HTTP请求结果或其它一些异步操作不再需要,Observable订阅者可以取消订阅,而Promise将最终调用成功或失败回调,即使你不需要通知或其提供结果。

17.3K80

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

angular英文字面意思:有角; 角测量 AngularJS协助搭建单页面工程(SPA)开源前端框架。它通过MVC模式使得开发与测试变得更容易。...items变量['A','B'],输出结果: Header A Body A </div...这个指令有三种使用方式,这三种方式取决于表达式计算结果: 如果表达式结果字符串,字符串使用空格分隔一个或多个类名。...如果表达式结果一个数组,数组中每个元素使用空格分隔一个或多个类名字符串。 如果表达式结果一个对象,对象中每个key-value中如果键值真时键名作为类名。...4.8、合并成字符 返回字符串,这个字符串将数组每一个元素连接在一起,中间 separator 隔开。

12.6K30

【玩转腾讯云】手把手教你使用VueReactAngular三大框架开发Pagination分页组件

如果同一个组件,用不同框架实现,会有什么不同呢? 带着这个想法,分别选用目前最火Vue/React/Angular三大框架,去实现一个简单Pagination分页组件。...其中:keyv-bind:key简写形式,元素绑定唯一key,用于DOM对比时性能优化。...然后监听dataSource变化,当dataSource变化时,将新赋值给lists: watch: { // 对dataSource进行监听,如果发生变化重新将新赋给lists dataSource...,我们jumpSize保存该。...: 如果总页码小于等于7,centerPages除首尾页之外所有页码; 如果总页码大于7,centerPages是以current中心,左右各加两页组成页码数组。

7.7K00

AngularDart4.0 指南- 模板语法一 顶

-- "The sum of 1 + 1 is not 4" --> The sum of 1 + 1 is not {{1 + 1 + getVal()}} Angular双曲花括号评估所有表达式...如果引用这些名称空间名称,模板变量名称优先,后面指令上下文,最后组件成员名称。 前面的例子显示了这样一个名字冲突。 该组件具有hero属性,而* ngFor定义了英雄模板变量。...disabled属性,并将其设置组件isUnchanged属性的当前。...属性绑定([property]) 编写一个模板属性绑定来设置一个视图元素属性。 该绑定将该属性设置模板表达式。 最常见属性绑定将元素属性设置组件属性。...返回适当类型 模板表达式应通过目标属性计算预期类型: 如果目标属性需要一个字符串,返回一个字符串。 如果目标属性期望一个数字,返回一个数字。 如果目标属性需要一个对象,返回一个对象。

5.1K10

前端面试题angular_Vue前端面试题

第一点区别是,ng-if 在后面表达式 true 时候才创建这个 dom 节点,ng-show 初始时就创建了, display:block 和 display:none 来控制显示和不显示。...避免这类问题出现办法,始终将页面中元素绑定到对象属性(data.x)而不是直接绑定到基本变量(x)上。 2,ng-repeat迭代数组时候,如果数组中有相同,会有什么问题,如何解决?...AngularJS在scope变量中使用脏检查来实现了数据双向绑定,并且可以通过scope.watch来监听变化触发回调; angular中使用脏检查机制,在angular中每次你绑定一些东西到你...,更新 scope.val 新对应 dom 7、一个 angular 应用应当如何良好地分层?...分属不同团队进行开发 angular 应用,如果要做整合,可能会遇到哪些问题,如何解决? 可能会遇到不同模块之间冲突。

14.1K20

前端相关片段整理——持续更新

on/emit 其他 使用vue实例作为中央事件总线 3.5. angular与react之对比 React 和 Angular 之间巨大差异 单向与双向绑定 React 和 Vue 都使用了虚拟...对这个词组翻译"资源表现层状态转化"。 4. js 4.1. js垃圾回收与内存管理 各大浏览器通常用采用垃圾回收有两种方法:标记清除、引用计数 4.1.1....最后,垃圾收集器完成内存清除工作,销毁那些带标记,并回收他们所占用内存空间 引用计数 跟踪记录每个被引用次数 当声明了一个变量并将一个引用类型赋值给该变量时,这个引用次数就是1。...相反,如果包含对这个引用变量又取得了另外一个这个引用次数就减1,释放那些引用次数0所占内存。...保持处理程序上下文一个小技巧将其设置到闭包内一个变量,当在上下文改变地方调用一个函数时,如setTimeout,你仍然可以通过该变量引用需要对象。

1.4K10

金九银十: 50 个JS 必须懂面试题为你助力

问题21:如何使用 JS 删除 cookie 如果要删除cookie以便后续尝试读取cookie,只需将过期日期设置过去时间。 咱们应该定义cookie路径以确保删除正确cookie。...undefined变量在程序中声明但未赋予任何变量如果程序试图读取未定义变量返回undefined。...问题 31: 列出一些JS框架 JS框架JavaScript编写应用程序框架,它与控制流中JS库不同,一些最常用框架: Vue Angular React 问题 32: window 与...## 问题44:如何在JS中清空数组 有许多方法可以用来清空数组: 方法一: ```javascript arrayList = [] 上面的代码将把变量arrayList设置一个新数组。...如果在其他任何地方都没有对原始数组arrayList引用,建议这样做���因为它实际上会创建一个新数组。

6.6K31

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

Angular一个完全集成框架,可以让您快速开始项目工作,无需考虑选择哪个库以及如何处理日常问题。认为Angular作为前端,就像RoR作为后端。...我们Input从Angular代码导入,并将其用作类型Array任何类型对象类级变量装饰器。...想想像这样:我们刚刚实现了在我们表单发生变化时调用代码。如果我们承诺处理用户更改,只有第一个用户更改会在我们需要重新订阅之前处理。...通过使用它,我们确保我们数据流一旦发生this.alive错误就会停止发布新,并且我们只需在该onDestroy组件函数中设置。...现在,就像我们同样方式生成它AboutComponent,我们稍后会填充它。至于路线结构,它或多或少自己说话。我们定义两条路线:/cards和/about。我们确保路径重定向/cards。

42.6K10

实战 | Change Detection And Batch Update

带着这两个问题,将简要分析一下React、Angular1、Angular2及Vue实现机制。...$apply()进行脏检测,核心代码如下 遍历所有scope$$watchers,通过get获取到最新同last比较,变化了通过调用fn更新DOM。...如果我们连续更新数据,Vue会立马更新DOM还是和React一样先缓存下来等待状态稳定进行批量更新呢?...由于事件系统Vue提供可控,我们再看下定时器下执行情况: 打开控制台,点击按钮会发现依旧打印了0 0,有人可能就疑惑了Vue是不是跟Angular2一样也修改了异步方法原生实现呢?...config.async 我们可以通过将Vue.config.async设置false,关闭异步更新机制,让它变成同步更新,看下面的例子: 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式

3.2K20

angular框架如何实现父子组件传、非父子组件传

大家好,又见面了,你们朋友全栈君。...文章目录 1.理解父子组件、非父子组件 2.父组件给子组件传- -@input 3.父组件通过@ViewChild主动获取子组件数据和方法 4.非父子组件如何传递数据 1.理解父子组件、非父子组件...假设父组件有一个方法: setChild(){ } 则在子组件模板这样绑定: 注意: 如果传递过多可以一个属性来包装着...3.父组件通过@ViewChild主动获取子组件数据和方法 在angular也提供了一个@Output修饰器来实现子组件给父组件传,但是这个方法较复杂,我们使用另一种@ViewChild方法来实现...4.非父子组件如何传递数据 现在知道有三种方法: cookie:只要在一个组件ts文件中设置了cookie,其他组件也可以读取cookie键值对。

1.5K20

50 个JS 必须懂面试题为你助力金九银十

问题21:如何使用 JS 删除 cookie 如果要删除cookie以便后续尝试读取cookie,只需将过期日期设置过去时间。 咱们应该定义cookie路径以确保删除正确cookie。...undefined变量在程序中声明但未赋予任何变量如果程序试图读取未定义变量返回undefined。 问题 31: 列出一些JS框架 ?...JS框架JavaScript编写应用程序框架,它与控制流中JS库不同,一些最常用框架: Vue Angular React 问题 32: window 与 document 区别: window...问题44:如何在JS中清空数组 有许多方法可以用来清空数组: 方法一: arrayList = [] 上面的代码将把变量arrayList设置一个新数组。...如果在其他任何地方都没有对原始数组arrayList引用,建议这样做,因为它实际上会创建一个新数组。

4.4K30

Angular基础-搭建Angular运行环境

控制台查看Node.js版本: node -v // 显示node.js版本npm -v // 显示npm版本 如果出现版本号说明安装成功。 成功显示版本说明安装成功。...ProgramFi1es\nodejs\node_g1oba1 此电脑右键>属性>高级系统设置>环境变量, 将prefix复制到环境变量系统变量Path。...4、测试是否安装成功 配置完成后,全局安装一个最常用 express 模块进行测试 npm install express -g // -g代表全局安装 出现以下界面即为配置成功 5、设置npm下载源淘宝镜像源...Team at Google under Google's Privacy Policy 这个问你愿不愿意将使用数据基于谷歌隐私政策提供给 Angular 团队,这个否。...其他都直接 Enter,直接选择

12921

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

在这个例子中,这是与Controller相同作用域;(我们后面将讨论作用域层级关系) 上一步取到作用域执行环境,计算greeting表达式,并且计算结果设置到到dom元素; 你可以认为作用域和它属性里数据用于渲染这个视图...通常ng-app在html元素上,但是它也可以放到其他元素上,比如页面上只有一部分angular来控制这种情况。...debug情况检查作用域: 右键点击元素,选择inspect element,你将看到浏览器调试器中高亮元素; 调试器允许你在控制台$0变量,去访问当前选中元素。...$watch(watchExpression,listener))当监视表达式整体返回转变成另一个新时会检测到变化。如果这个一个数组或对象,它们内部变化则无法监测到。...watch列表一个自从最后一次便利后表达式里修改集合。如果有一个修改被检测到了,那么watch函数被调用用于更新dom

13.2K20

AngularDart4.0 指南- 表单 顶

一路上你将学习如何组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制双向数据绑定。 跟踪状态变化和表单控件有效性。...请注意,您还为标记添加了一个ngControl指令,并将其设置“name”,这对于英雄名字有意义。 任何唯一将会这样做,但使用描述性名称是有帮助。...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置“ngForm”,因为ngModel指令exportAs属性“ngForm”。...如果您忽略原始状态,只有在该有效时才会隐藏该消息。 如果您使用新(空白)英雄或无效英雄到达此组件,则在您执行任何操作之前,您将立即看到错误消息。...文本字段变为空白,如果您更改了power,它将恢复默认ngSubmit提交表单 用户应该能够在填写表单后提交这个表单。

17.5K30
领券