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

Angular 2如何让setter等待输入setter完成

Angular 2是一种流行的前端开发框架,它采用了响应式编程的思想,通过使用组件和数据绑定来构建用户界面。在Angular 2中,setter方法可以用来监听和响应属性的变化。下面是关于如何让setter等待输入setter完成的完善答案:

在Angular 2中,可以使用@Input装饰器来定义一个属性,并使用setter方法来监听该属性的变化。当属性的值发生变化时,setter方法会被自动调用。

要让setter等待输入setter完成,可以使用asyncawait关键字来实现。首先,将setter方法声明为异步函数,即在方法前面加上async关键字。然后,在setter方法内部使用await关键字来等待输入setter完成。

下面是一个示例代码:

代码语言:typescript
复制
private _inputValue: string;

@Input()
set inputValue(value: string) {
  this._inputValue = value;
  this.processInputValue();
}

async processInputValue() {
  // 等待输入setter完成
  await this.delay(1000);
  
  // 在这里进行输入setter完成后的操作
  console.log('输入setter已完成');
}

delay(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

在上面的示例中,inputValue是一个属性,当它的值发生变化时,inputValue的setter方法会被调用。在setter方法内部,我们使用await this.delay(1000)来等待输入setter完成,这里的delay方法是一个异步函数,它会延迟指定的时间(这里是1秒)。

通过这种方式,我们可以让setter方法在输入setter完成后再执行后续的操作,确保输入setter完成后再进行相关处理。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云函数(SCF)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。您可以根据实际需求选择不同配置的云服务器,以满足您的需求。了解更多信息,请访问:腾讯云云服务器(CVM)
  • 腾讯云函数(SCF):是一种无服务器计算服务,可以帮助您构建和运行无服务器应用程序。您可以使用腾讯云函数来处理和响应事件,而无需管理服务器。了解更多信息,请访问:腾讯云函数(SCF)

以上是关于Angular 2如何让setter等待输入setter完成的完善答案,希望对您有帮助!

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

相关·内容

Vue.js快速入门

作为前端的三大框架之一(其他两个是Angular、React),Vue得到了大多前端开发者的青睐,最新版本为2.4.4 。...那么ViewModel是如何实现双向绑定的呢? ? Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的。...用户看不到 getter/setter,但是在内部它们 Vue 追踪依赖,在属性被访问和修改时通知变化。...2,安装cnpm 安装完node之后,npm包含的很多依赖包是部署在国外的,为了加快依赖包的加载速度,开发中一般选择使用国内的镜像。...接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包: cnmp install 接下来,在命令行里输入命令: cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功

2.2K90

Vue.js简介

作为前端的三大框架之一(其他两个是Angular、React),Vue得到了大多前端开发者的青睐,最新版本为2.4.4 。...那么ViewModel是如何实现双向绑定的呢? ? Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的。...用户看不到 getter/setter,但是在内部它们 Vue 追踪依赖,在属性被访问和修改时通知变化。...2,安装cnpm 安装完node之后,npm包含的很多依赖包是部署在国外的,为了加快依赖包的加载速度,开发中一般选择使用国内的镜像。...接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包: cnmp install 接下来,在命令行里输入命令: cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功

5.5K70

vue响应式原理(数据双向绑定的原理)

比如React,它也有一定程度的主张,它的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为它是软性侵入。...Controller - Controller完成业务逻辑后,要求Model改变状态 - Model将新的数据发送到View,用户得到反馈 所有通信都是单向的。...angular.js只有在指定的事件触发时,进入脏值检测,大致如下: - DOM事件,譬如用户输入文本,点击按钮等(ng-click) - XHR响应事件($http) -...首先,需要对observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter getter。这样的话,给这个对象的某个属性赋值,就会触发setter,那么就能监听到数据变化。...(其实是通过Object.defineProperty()实现监听数据变化的) 2.

2.6K40

Angular开发实践(四):组件之间的交互

Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是两个或多个组件之间交互的方法。...父组件向子组件传递 子组件通过@Input装饰器定义输入属性,然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据,子组件可通过setter或ngOnChanges()来截听输入属性值的变化。...1 @Input() paramTwo: any; // 输入属性2 } 子组件通过@Input()定义输入属性paramOne和paramTwo(属性值可以为任意数据类型) 父组件: @Component...通过 setter 截听输入属性值的变化 在实际应用中,我们往往需要在某个输入属性值发生变化的时候做相应的操作,那么此时我们需要用到输入属性的 setter 来截听输入属性值的变化。...2 } 在上面的代码中,我们可以看到通过paramOne属性的 setter 将拦截到的值val赋值给内部私有属性paramOneVal,达到父组件传递数据给子组件的效果。

3.4K80

Angular Input和Output

Input 是属性装饰器,用来定义组件内的输入属性。在实际应用场合,我们主要用来实现父组件向子组件传递数据。...& getter setter 和 getter 是用来约束属性的设置和获取,它们提供了一些属性读写的封装,可以代码更便捷,更具可扩展性。...通过 setter 和 getter 方式,我们对类中的私有属性进行了封装,能避免外界操作影响到该私有属性。...此外通过 setter 我们还可以封装一些业务逻辑,具体示例如下: counter.component.ts import { Component, Input } from '@angular/core...当 Angular 在解析模板时,遇到 [(modelName)] 形式的绑定语法,它会期待这个指令中会存在一个名为 modelName 的输入属性和一个名为 modelNameChange 的输出属性

2.3K50

Change Detection And Batch Update

那么这里就有两个很重要的问题了:当数据变化时,这些框架/库是如何感知到的?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。 React Virtual DOM ?...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏值检测有点像,但是Angular2的更新没有副作用...如果我们连续更新数据,Vue会立马更新DOM还是和React一样先缓存下来等待状态稳定进行批量更新呢?...(1); setter(2); Vue是通过JavaScript单线程的特性,利用事件队列进行批量更新的。

3.7K70

前端三大框架vue,angular,react大杂烩

这三个框架的出现,不仅前端的工作得以高效,也后端省了不少事,比如,路由控制。在以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...-> Angular2    Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。...纠结模板引擎,纠结模板存放位置,纠结如何引用模板。    React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离问题复杂化了。

3K90

前端三大框架vue,angular,react大杂烩

这三个框架的出现,不仅前端的工作得以高效,也后端省了不少事,比如,路由控制。在以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...-> Angular2    Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。...纠结模板引擎,纠结模板存放位置,纠结如何引用模板。    React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离问题复杂化了。

2.1K60

Vue常见面试题--简书01

home'> router-link标签会渲染为标签,咋填template中的跳转都是这种; 另一种是编程是导航 也就是通过js跳转 比如 router.push('/home') 3.如何...Watcher,当对a.b求值的时候,就会触发它的getter,当修改a.b的值的时候,就会触发它的setter,同时会通知被关联的Watcher,然后Watcher就会再次对a.b求值,计算对比新旧值...,当值改变了,Watcher就会通知到指令,调用指令的update()方法,由于指令是对DOM的封装,所以就会调用DOM的原生方法去更新视图,这样就完成了数据改变到视图更新的一个自动过程 5.Vue...对比其他框架原理 Vue相对于React,Angular更加综合一点。...你可以把一些视图逻辑放在一个ViewModel里面,很多view重用这段视图逻辑。 *独立开发。

75730

前端三大框架大杂烩

1.3、脏检测的利弊   和ember.js等技术的getter/setter观测机制相比(优):   getter/setter当每次对DOM产生变更,它都要修改DOM树的结构,性能影响大,Angular...2、视图渲染 Angular1   AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...-> Angular2   Angular1使用依赖注入来解决模块之间的依赖问题,模块几乎都依赖于注入容器以及其他相关功能。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue   Vue中指令和组件分得更清晰。...纠结模板引擎,纠结模板存放位置,纠结如何引用模板。   React 认为组件才是王道,而组件是和模板紧密关联的,组件模板和组件逻辑分离问题复杂化了。

2.6K50

实战 | Change Detection And Batch Update

如何感知到数据变化的呢?...Angular2 当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏值检测有点像,但是Angular2...setter Vue通过Object.defineProperty将data转化为getter/setter,这样我们直接修改数据时,Vue就能够感知到数据的变化了,这个时候就可以进行UI更新了。...如果我们连续更新数据,Vue会立马更新DOM还是和React一样先缓存下来等待状态稳定进行批量更新呢?...config.async 我们可以通过将Vue.config.async设置为false,关闭异步更新机制,它变成同步更新,看下面的例子: 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式

3.2K20

基础 - 从模板语法数据绑定、指令到计算属性总结

写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者、社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓的争论...message: 'v-bind绑定标签特性', isButtonDisabled: false } }) 2)...this.message); } } }) 从我个人而言,在这里相比之下,vue的代码编写风格更加简洁,通俗易懂; 计算属性和观察者 vue支持内联表达式,可以完成简单的布尔操作...丶计算属性的setter,像上面那样,一般computed计算属性默认只有一个getter,但是如果有需要可以提供一个setter给计算属性; {{fullName}} // 计算属性的setter var app13 = new Vue({ el: '#app13', data: { firstName

1.9K90

WPF MVVM 弹框之等待

一、效果 先来看看效果,首先是其它弹框(动图): 然后是等待弹框(动图): 下面来看如何实现,当然,是在之前的基础上进行的,前一篇文章没看的话,需要先看一下,或者直接获取文末提供的代码查看。...然后是中间的主体区域,图上看不出什么变化,实际上变化还是比较大的,代码如下: 文字版: <!...关键是如何在执行完业务方法后才关闭弹窗呢? 一开始 Func action 这个参数我用的还是 Action action,这样的话,action?....这样的话,就可以通过如下方式(ContinueWith)达到业务方法执行完成之后关闭弹窗了: Console.WriteLine($"等待框就绪,业务操作开始执行..."); await Task.Run

2.4K20

idea企业开发之插件推荐

打开设置界面,点击 Plugins ,在搜索栏输入 GenerateAllSetter ,再按回车,点击 Install 安装 安装完成后,点击重启 使用的时候,在待生成 setter...with default values : 设置默认值,同时产生所有setter generate setter getter converter : 用于数据的适配 2.2 快捷键提示插件 简介:介绍如何安装使用快捷键提示插件...比如,用鼠标 run 一个代码,就会自动弹出run的快捷键 2.3 lombok插件 简介:介绍Class的属性自动生成getter、setter的插件。...打开设置界面,点击 Plugins ,搜索 AceJump ,敲回车,再点击安装 安装完成后,按快捷键 ctrl+; (该快捷键是插件默认的),按完后如下所示 再输入一个字符(这里输入 e 来演示...如果项目复杂,执行命令后的过程会比较久,使用这个插件的话就不用耗那么多时间等待

1.1K10

WPF 应用启动过程同时启动多个 UI 线程且访问 ContentPresenter 可能让多个 UI 线程互等

如果有某个线程在执行静态构造函数,那么其他的线程将需要等待静态构造函数执行完成才能继续碰类型。...也就是说 ContentPresenter 的静态构造函数必须等待主 UI 线程释放锁才能完成,然而主 UI 线程必须等待 ContentPresenter 的静态构造函数执行完成才能释放锁 于是就构成了两个线程相互等待...执行在新 UI 线程的 ContentPresenter 的静态构造函数在等待主 UI 线程释放锁才能执行完成。主 UI 线程在等待新 UI 线程的静态构造函数执行完成。...新 UI 线程在等待主 UI 线程等待静态构造函数执行完成之后释放的锁 两个 UI 线程进入摸鱼,应用就起不来 看到以上的原理,在实际的应用里面,想要遇到这个坑还是很难。...再加上静态构造函数只能被调用一次,这就让其他多线程碰到此类型,都需要等待静态构造函数执行完成

58810

Vue全家桶

Vue全家桶一、Vue1.1 Vue概述Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式的js框架,发布于 2014 年 2 月。...Vue.js 压缩后有只有 20多kb (Angular 压缩后 56kb+,React 压缩后 44kb+)b.移动优先。...更适合移动端,比如移动端的 Touch 事件c.易上手,学习曲线平稳,文档齐全d.吸取了 Angular(模块化)和 React(虚拟 DOM)的长处,并拥有自己独特的功能,如:计算属性e.开源,社区活跃度高...这些 getter/setter 对用户来说是不可见的,但是在内部它们 Vue 追踪依赖,在属性被访问和修改时通知变化。...这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

38320

架构图以及vue的简介

Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图...用户看不到 getter/setter,但是在内部它们 Vue 追踪依赖,在属性被访问和修改时通知变化。 ?...则是其中非常流行的一种, 首先,我们要通过 npm/Yarn 或一个 CDN 链接安装 axios, 我们有很多种方式可以从 API 请求信息,但是最好首先确认这些数据看起来长什么样,以便进一步确定如何展示它...假设项目名为:vue-element-admin) cd vue-element-admin ​ # 安装依赖 npm install ​ # 本地开发 启动项目 npm run dev ​ # 启动完成我们就能在...还想了解更多关于vue的相关知识,推荐认真阅读 vue的官方文档:https://cn.vuejs.org/v2/guide/

6K40
领券