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

如何确保在使用Angular 8中的getter之前已完成setter

在使用Angular 8中的getter之前确保已完成setter的方法是通过使用异步编程的方式来实现。以下是一种常见的实现方式:

  1. 创建一个Promise对象或使用Observable来处理异步操作。
代码语言:txt
复制
private _data: any;
private _dataPromise: Promise<any>;

public get data(): Promise<any> {
  if (this._dataPromise) {
    return this._dataPromise;
  } else {
    this._dataPromise = new Promise((resolve) => {
      // 在setter中完成异步操作后,调用resolve方法来解析Promise
      this._data = 'some data'; // 假设setter中设置了数据
      resolve(this._data);
    });
    return this._dataPromise;
  }
}
  1. 在setter中完成异步操作后,调用resolve方法来解析Promise。
代码语言:txt
复制
public set data(value: any) {
  // 异步操作,例如从服务器获取数据
  setTimeout(() => {
    // 完成异步操作后,设置数据并解析Promise
    this._data = value;
    if (this._dataPromise) {
      this._dataPromise.resolve(this._data);
      this._dataPromise = null;
    }
  }, 1000);
}
  1. 在使用getter时,通过调用data属性的then方法来获取数据。
代码语言:txt
复制
this.data.then((data) => {
  // 在这里使用获取到的数据
  console.log(data);
});

这种方法可以确保在使用getter之前已完成setter中的异步操作。在getter中,如果setter已经完成了异步操作并设置了数据,那么直接返回已解析的Promise;如果setter还未完成异步操作,那么创建一个Promise对象,并在setter完成异步操作后解析该Promise。这样,在使用getter时,可以通过调用Promise的then方法来获取数据,确保数据已经准备好。

对于Angular 8中的getter和setter的更多信息,可以参考官方文档:Property accessors

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

相关·内容

Vue.js快速入门

和其他框架对比,也是各有优劣,相关介绍,读者可以参考笔者之前文章:VueJs与其他框架对比。 总的来说,可以总结为如下: 优点: 简单:官方文档很清晰,比 Angular 简单易学。...对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 各种规定,使用场景更加灵活。...那么ViewModel是如何实现双向绑定呢? ? Vue.js 是采用 Object.defineProperty gettersetter,并结合观察者模式来实现数据绑定。...用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,属性被访问和修改时通知变化。...接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包: cnmp install 接下来,命令行里输入命令: cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功

2.2K90
  • Vue.js简介

    和其他框架对比,也是各有优劣,相关介绍,读者可以参考笔者之前文章:VueJs与其他框架对比。 总的来说,可以总结为如下: 优点: 简单:官方文档很清晰,比 Angular 简单易学。...对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 各种规定,使用场景更加灵活。...那么ViewModel是如何实现双向绑定呢? ? Vue.js 是采用 Object.defineProperty gettersetter,并结合观察者模式来实现数据绑定。...用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,属性被访问和修改时通知变化。...接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包: cnmp install 接下来,命令行里输入命令: cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功

    5.5K70

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

    比如React,它也有一定程度主张,它主张主要是函数式编程理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它侵入性看似没有Angular那么强,主要因为它是软性侵入。...Vue实现数据双向绑定原理: 如new Vue一个实例对象a,其中有一个属性a.b,那么实例化过程中,通过Object.defineProperty()会对a.b添加gettersetter,同时...DOM原生方法去更新视图,这样就完成了数据改变到视图更新一个自动过程 实现数据双向绑定方法: 发布者-订阅者模式(backbone.js) 思路:使用自定义data属性,HTML代码中指明绑定...,通过Object.defineProperty()来劫持各个属性settergetter,在数据变动时,发布消息给订阅者,触发相应监听回调。...首先,需要对observe数据对象进行递归遍历,包括子属性对象属性,都加上setter getter。这样的话,给这个对象某个属性赋值,就会触发setter,那么就能监听到数据变化。

    2.7K40

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

    说了点题外话,进入今天正题 - - 今天主题是vue,也是我之前初步学习vue和angular之后,选择vue第二天,因为已经凌晨了,但是我不想去排斥其他,应该多多学习不同前辈们智慧结晶 ;...之前图灵社区读过一篇文章《Vue作者尤雨溪:以匠人态度不断打磨完善vue》, 先来一发福利照 - -  ?...“Mustache”语法 (双大括号) 文本插值,无论是vue,还是angular,小程序都采用了这种方式文本插值 丶而v-once指令也好理解,一次性插值,当我们改变数据时候,插值内容不会随之改变...v-model实现双向数据绑定, 在看vue双向数据绑定之前,我们先看一下一个简单angular双向数据绑定: <div ng-controller...丶计算属性setter,像上面那样,一般computed计算属性默认只有一个getter,但是如果有需要可以提供一个setter给计算属性; {{fullName}}<

    1.9K90

    精选面试题教你应对高级iOS开发面试官(提供底层进阶规划蓝图)

    ivar、gettersetter如何生成并添加到这个类中 本质:@property = ivar + getter + setter;(实例变量+getter方法+setter方法)在编译期自动生成...gettersetter,还自动向类中添加适当类型实例变量,也可以用synthesize语法来指定实例变量名字 @protocol 和category中如何使用@property?...1、protocol中使用property只会生成 settergetter方法声明,使用属性目的,是希望遵守该协议对象能实现该属性 2、category使用@property 也是只会生成...同时重写了settergetter时,系统就不会生成ivar,使用@synthesize foo =_foo;关联@property 与ivar 重写了只读属性getter使用了@dynamic...使用block时什么情况会发生引用循环,如何解决? 一个对象中强引用了block,block中又强引用了该对象,就会发生循环引用。

    53200

    Vue常见面试题--简书01

    实例化过程中,通过Object.defineProperty()会对a.b添加gettersetter,同时Vue.js会对模板做编译,解析生成一个指令对象(这里是v-text指令),每个指令对象都会关联一个...Watcher,当对a.b求值时候,就会触发它getter,当修改a.b时候,就会触发它setter,同时会通知被关联Watcher,然后Watcher就会再次对a.b求值,计算对比新旧值...,当值改变了,Watcher就会通知到指令,调用指令update()方法,由于指令是对DOM封装,所以就会调用DOM原生方法去更新视图,这样就完成了数据改变到视图更新一个自动过程 5.Vue...对比其他框架原理 Vue相对于React,Angular更加综合一点。...AngularJS则使用了“脏值检测”。 React则采用避免直接操作DOM虚拟dom树。

    76730

    2021Vue.js面试题汇总及答案【全网最全 建议收藏】「建议收藏」

    settergetter,在数据变动时发布消息给订阅者,触发相应监听回调。...created实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数。...beforeMount发生在挂载之前,在这之前template模板导入渲染函数编译。而当前阶段虚拟Dom已经创建完成,即将开始渲染。在此时也可以对数据进行更改,不会触发updated。...mounted挂载完成后发生,在当前阶段,真实Dom挂载完毕,数据完成双向绑定,可以访问到Dom节点,使用$refs属性对Dom进行操作。...编码阶段 1.尽量减少data中数据,data中数据都会增加gettersetter,会收集对应2.watcher 3.v-if和v-for不能连用 4.如果需要使用v-for给每项元素绑定事件时使用事件代理

    8.7K30

    干货 | 前端阶段性总结之「框架相关」那些事

    触框架里面,可能是Angular最多吧,之前项目都是Angular1,现在项目在用Angular2。不得不说,Angular对管理端开发效率其实是很不错,毕竟PC端对性能优化等宽容度都还可以。...这也是一个比较有意思概念吧,大家可以参考《深度剖析:如何实现一个 Virtual DOM 算法》。...Vue Vue也有两个版本了,不过Vue1和Vue2升级就没Angular那样坑了。 对于Vue,其实要说大概是数据gettersetter,虽然听说Vue2版本也使用了虚拟DOM。...数据绑定 Angular1:脏检测($watch + $digest机制),性能比较难看 React:虚拟DOM,性能棒棒哒,但相比Vue的话,需要手动配置才能到最好效果 Vue1:getter/setter...数据跟踪 Vue2:增加虚拟DOM(听说,未经验证) 使用场景 移动端:由于性能问题,Angular移动端推荐为0,React/Vue感觉还可以 PC端:Angular开发效率会好些,React对团队有要求

    95520

    iOS_理解“属性”(property)这一概念

    上述操作完成写之后,A线程再读取出来就不是其希望获取到值了(而是B线程写入值);另外若还有个C线程A读之前进行了release操作(MRC模式下时),还会导致crash。...这就破坏了线程安全,因而还需要我们为线程添加锁等操作来确保线程安全。 atomic只是保证了存取方法gettersetter线程安全,并不能保证整个对象是线程安全。...(如:NSArrayobjectAtIndex:就不是线程安全,需要加锁等确保安全) nonatomic非原子性访问: ​ 就是去掉了atomic为存取方法添加锁,即其gettersetter方法不是线程安全...iOS4 以及之前还没有引入 weak,这种情况想表达弱引用语义只能使用 unsafe_unretained。这种情况现在已经很少见了。 性能考虑。...__strong:强引用,保证block执行完之前,对象不会被释放。

    58720

    Angular Elements 及其工作原理

    可以通过 Custom Elements API 来完成这件事。文章后续章节,我们将演示如何使用 Angular 组件 @Input 装饰器与 这个 name 属性保持同步。...// 通过 setter完成类属性到元素属性映射操作 set name(val) { this.setAttribute('name', val); } connectedCallback...顺便,关于如何动态构造 Angular 组件可以通过阅读Dynamic Components in Angular这篇文章进行了解。它其中阐述运作机制和我们这里使用一模一样。...input 值 // 本例中, Angular Element 被加载之前,user 可能已经设置了元素属性 // 这些值被保存在 initialInputValues 这个 map...通过 Angular使用动态组件,我们简单实现了 Angular Elements 所提供基础功能,重要是,没有使用 @angular/element 这个库。

    2.4K20

    React 如何转 Vue.js

    React 和 Vue 相似性多于差异性: 都是用于创建 UI JavaScript 库 都是快速和轻量级 都有基于组件架构 都使用虚拟 DOM 都可以放在单独 HTML 文件中,或者更复杂...因为 Vue 响应式系统(reactivity system)不需要它。 Re-rendering Vue 初始化步骤之一是遍历所有数据属性并将其转换为 gettersetter。...Vue 访问或修改属性时添加了这些 gettersetter 来启用依赖关系跟踪和更改通知。...这就是为什么 Vue 中不需要 shouldComponentUpdate 原因。 主模板 关于主模板文件,Vue 更像 Angular。与 React 一样,Vue 需要挂载页面的某个位置。...因为你使用 HTML 标记获得“正确”模板,但 JavaScript 正好在那里,因此模板和逻辑之前没有尴尬分离。 有一个名为 vue-loader Webpack 加载器负责处理 SFC。

    3.3K20

    Vue.js 计算属性 原

    计算属性与methods方法 模板内表达式是非常便利,但在模板中放太多逻辑会让模板过重且难以维护,对于复杂逻辑应该使用计算属性   Original...computed与methods最终结果是相同,不同是计算属性是基于它们依赖进行缓存,计算属性只有相互依赖改变时才会重新求值,意味着只要message不发生变化,多次访问reversedMessage...计算属性会立即返回之前计算结果,而不必执行函数,相比之言,只要发生重新渲染,methods调用总会执行该函数,如果不希望有缓存,请使用methods 计算属性与Watched属性 Vue...确实提供了一种更通用方式来观察与响应实例上数据变化,你很容易滥用watch,特别是如果你之前使用Angular JS,通常更好方法是使用computed属性而不是命令式watch回调 如下例子是使用...计算属性默认只有getter,不过需要时你也可以提供一个setter       var app = new Vue({         el: "#app",

    1.7K30

    property属性相关小记

    当多线程环境下同时调用一个setter时,可能会出现无法获取完整数据。使用atomic属性时,则会一个线程执行完setter全部语句前,不会让另一个线程开始执行setter,以此保证数据完整性。...对于只读属性只需提供getter即可。当一个属性被声明为@dynamic var并没有提供gettersetter方法,当执行到需要settergetter方法时,导致崩溃。...若成员已经存在,则不再生成 protocol和category中如何使用@property 两者中,都会生成settergetter方法声明。...重写只读属性getter时; 重写settergetter使用了@dynamic时 @protocol中定义了所有属性时 category定义了所有属性时 重载了属性时 能否向编译后类中添加实例变量...运行时创建类可以添加实例变量,是调用class_addIvar函数,但是调用objc_allocateClassPair之后,objc_registerClassPair之前

    1.1K20

    vue数据双向绑定原理-observer

    个人觉得, 不论是否 是长期与之交集, 还是应该看下核心东西. 多多了解高人是如何实现 , 这样才能学到更多知识, 才能成长进步. ...通过 Object.defineProperty() 来劫持各个属性 setter , getter ,在数据变动时发布消息给订阅者,触发相应监听回调。...假如写过 C# winform 自定义控件, 我想更好理解之后逻辑和实现原理 C# 中 当控件某个属性发生了变化, 就刷新视图 priveate int a ; public int A...: 实现 Observer 将需要 observe 数据对象进行递归遍历,包括子属性对象属性,都加上 settergetter 这样的话,给这个对象某个值赋值,就会触发 setter...监听器就实现完成了, 接下来继续完成 Watcher .

    73320
    领券