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

当我在promise angular typescript中设置它时,值总是未定义

在Promise Angular TypeScript中设置值为未定义的问题可能是由于异步操作导致的。Promise是一种用于处理异步操作的对象,它可以在未来的某个时间点返回一个值。在Angular中,Promise通常用于处理异步的HTTP请求或其他需要等待结果的操作。

当你在Promise Angular TypeScript中设置值时,值总是未定义,可能是因为你在设置值之前就访问了该值。由于Promise是异步的,它不会立即返回结果,而是在异步操作完成后才会执行回调函数。因此,在设置值之前,你需要等待Promise的结果返回。

解决这个问题的一种方法是使用Promise的then()方法来处理异步操作的结果。在then()方法中,你可以将返回的值赋给相应的变量。例如:

代码语言:txt
复制
let myValue: any;

myPromise.then((result) => {
  myValue = result;
}).catch((error) => {
  console.error(error);
});

在上面的代码中,myPromise是一个返回Promise对象的异步操作。在then()方法中,当Promise成功返回结果时,将结果赋给myValue变量。如果Promise返回错误,则会执行catch()方法中的代码。

另一种解决方法是使用async/await语法。async/await是一种用于处理异步操作的语法糖,它可以使异步代码看起来更像同步代码。使用async/await,你可以在函数前面加上async关键字,并在需要等待结果的地方使用await关键字。例如:

代码语言:txt
复制
async function myFunction() {
  try {
    let result = await myPromise;
    let myValue = result;
  } catch (error) {
    console.error(error);
  }
}

myFunction();

在上面的代码中,myFunction()是一个异步函数,使用了async关键字。在函数内部,使用await关键字等待myPromise的结果,并将结果赋给myValue变量。如果Promise返回错误,则会执行try-catch块中的代码。

总结起来,当在Promise Angular TypeScript中设置值时,值总是未定义的问题可以通过使用Promise的then()方法或async/await语法来解决。这样可以确保在异步操作完成后再访问设置的值。

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

相关·内容

作为前端leader,为何我公司力推ts?

通过这种方式,如果存在尚未定义的父级对象,则会在链的任何位置返回未定义,而不是在运行时崩溃。...() 02 2.空合并 从 v3.7 可用 空合并运算符是 || 的替代方法,如果左侧是 null 或 undefined,则返回右侧的表达式。这和 || 有什么不同?...'Unknown' //仅在 inputString 未定义为 Unknown passCode = data.number ??...例如,当你尝试处理分层数据,会发现存在相同类型数据的重复模式。JSON 是一个很好的例子,本质上是一个哈希映射,而哈希映射本身可以包含另一个映射或映射数组。...提供更好的反馈 从 3.6 起改进 代码中直接使用 Promise 而忘记使用 await 或 then 是常见的错误,如下所示: } 以前的 TypeScript 完全不了解 Promise,并显示一条与其无关的错误消息

2.7K10

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

@angular/core会创建组件,渲染,创建并呈现的后代。当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM删除其模板之前,就会销毁掉。...ngOnChanges:当Angular设置其接收当前和上一个对象的数据绑定属性响应。 ngOnInit:第一个ngOnChange触发器之后,初始化组件/指令。...Angular2,组件中发生的任何改变总是从当前组件传播到其所有子组件。如果一个子组件的更改需要反映到其父组件的层次结构,我们可以通过使用事件发射器api来发出事件。...这通常用在setter,当类被更改完成。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...要在Visual Studio代码设置codelyzer,我们可以文件 - >选项 - >用户设置添加tslint规则的路径。

17.3K80

Angular专题】——(2)【译】Angular的ForwardRef

"; } } 当我们试图运行上面的代码并未能够正常工作。...无论如何,当我调试器打开Pause on caught exceptions功能,就会在Angular框架捕获这个错误: Cannot resolve all parameters for...从上面的示例不难看出,如果Javascript解释器对class声明也进行提升处理,就容易类继承出现基类未定义的错误。 三. class使用前必须声明吗?...小结 这个场景并不会经常出现,一般只在当我们想要注入同一个文件声明的类才会发生,大多数情况下我们一个文件只会声明一个类,并且会在文件的头部引入其他依赖的类,以此来保证不会被class不进行变量提升的特性造成困扰...五.补充 以下内容摘录自Angular中文网: Typescript里面,类声明的顺序很重要,如果一个类尚未定义,就不能引用它。 这通常都没有问题的,特别是遵循一个文件一个类规则的时候。

3.2K20

JavaScrip最容易犯的十大错误及其避免方法()

让我们看一个真实应用程序如何发生这种情况的示例。 我们将选择React,但不正确初始化的相同原则也适用于Angular,Vue或任何其他框架。...当您异步获取数据,组件将在加载数据之前至少呈现一次 - 无论是构造函数,componentWillMount还是componentDidMount获取。...Uncaught TypeError: Cannot set property 当我们尝试访问未定义的变量总是返回undefined,我们无法获取或设置undefined的任何属性。...ReferenceError: event is not defined 当您尝试访问未定义或超出当前范围的变量,将引发此错误。 您可以Chrome浏览器轻松测试。...即使没有Typescript使用它们之前使用guard子句来检查对象是否未定义也是有帮助的。

11610

TypeScript: 为什么必须学

这极大的提高JS代码灵活性的同时,带来的副作用也同样明显,一个变量我们的应用无法预知扮演的角色,维护成本远超想象。...复杂项目中,我们通常无法承受JS弱类型的副作用,这是typescript出现的基础动因,让JavaScript具备了强类型语言的特征。当然,除了解决这些基础问题,ts还有许多别的特性。...基础变量约束 5 作用3:描述函数规则,即明确的告诉使用者该函数的参数类型与返回类型 当我们定义了add函数,要求传入该函数的参数分别为2个number类型,并且返回也为number类型。...我们自定义了一个函数moveTo,该函数接收两个参数 运动的动画曲线类型,我们期望使用该函数只能传入 linear, ease, bounce的一个 运动方向, 我们期望只能传入上下左右四个方向...而 typescript 复杂项目中,对于代码可读性带来的增强是非常具有吸引力的。因此越来越多的团队项目中深度使用 ts。甚至 angular 团队,整个angular都是直接使用ts开发。

1.3K30

TS 真香系列:你应该知道的核心功能

通过这种方式,如果存在尚未定义的父级对象,则会在链的任何位置返回未定义,而不是在运行时崩溃。...() 02 2.空合并 从 v3.7 可用 空合并运算符是 || 的替代方法,如果左侧是 null 或 undefined,则返回右侧的表达式。这和 || 有什么不同?...'Unknown' //仅在 inputString 未定义为 Unknown passCode = data.number ??...例如,当你尝试处理分层数据,会发现存在相同类型数据的重复模式。JSON 是一个很好的例子,本质上是一个哈希映射,而哈希映射本身可以包含另一个映射或映射数组。...提供更好的反馈 从 3.6 起改进 代码中直接使用 Promise 而忘记使用 await 或 then 是常见的错误,如下所示: } 以前的 TypeScript 完全不了解 Promise,并显示一条与其无关的错误消息

2K40

7 个好用的 TypeScript 新功能

通过这种方式,如果存在尚未定义的父级对象,则会在链的任何位置返回未定义,而不是在运行时崩溃。...() 02 2.空合并 从 v3.7 可用 空合并运算符是 || 的替代方法,如果左侧是 null 或 undefined,则返回右侧的表达式。这和 || 有什么不同?...'Unknown' //仅在 inputString 未定义为 Unknown passCode = data.number ??...例如,当你尝试处理分层数据,会发现存在相同类型数据的重复模式。JSON 是一个很好的例子,本质上是一个哈希映射,而哈希映射本身可以包含另一个映射或映射数组。...提供更好的反馈 从 3.6 起改进 代码中直接使用 Promise 而忘记使用 await 或 then 是常见的错误,如下所示: } 以前的 TypeScript 完全不了解 Promise,并显示一条与其无关的错误消息

1.8K20

angular面试题及答案_angular面试

当observable或promise返回data,我们使用一个临时属性来保存内容。稍后,我们将相同的内容绑定到模板。...)生成的是TS代码 — 流程: – typescript开发angular应用 – 用ngc编译 用angular...此功能用于更改模板上的输出;比如将字符串更改为大写并在模板上显示。它还可以相应地更改日期格式。...ngOnInit : angular 第一次显示数据绑定和设置指令、组件的输入属性之后,初始化指令、组件 所以从angular的生命周期看,constructor是执行在先的 所以既然ngOnchanges...是输入属性发生变化的时候调用,并且ngOnInit是ngOnchanges执行之后才调用,而constructor是组件实例化的时候就调用了,也就是说,constructor是取不到输入属性的

10.9K120

进阶 | 重新认识Angular

Angular 核心:使用脏检测(新/旧比较)Diff 当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图 Zone.js(猴子补丁:运行时动态替换) 将Javascript异步任务包裹一层...依赖注入 Angular的依赖注入可谓是灵魂了,之前有篇详细讲这个的文章《谈谈Angular2的依赖注入》。...上面也说道,并不是所有的组件都会注入服务的,所以有了”注入器冒泡”: 当一个组件申请获得一个依赖Angular先尝试用该组件自己的注入器来满足。...通过路由的lazyload以及上面提到的模块化,我们可以把每个lazyload的模块单独打包成一个分块bundle文件,当进入模块才请求和加载,当我们的业务规模很大的时候,首屏速度得到大幅度提升。...Promise需要调用then或者catch才能够执行,catch是另一种形式的then,调用then或者catch之后,返回一个新的Promise,这样新的Promise也可以同样被调用,所以可以做成无限的

2.5K10

angular5面试题_大数据面试题

Angular提供了一种平滑的机制,通过我们可以将这些依赖项注入我们的组件和指令。因此,我们只是构建依赖关系,这些依赖关系可以应用程序的所有组件之间注入。...开发者可以根据场景来设置更加高效的变化检测方式:onPush。onPush策略,就是只有当输入数据的引用发生变化或者有事件触发,组件才进行变化检测。 NgFor应该伴随trackBy方程使用。...绑定方法调用的结果:每个脏检测过程,classes方程都要被调用一遍。如果没有特殊需求,应尽量避免这种使用方式。...pipe方式: 和绑定function类似,每次脏检测classPipe都会被调用。不过Angular给pipe做了优化,加了缓存,如果item和上次相等,则直接返回结果。...Promise返回一个;Observable返回0至N个

4.3K20

什么是 TypeScript 4.1 的模板字面类型?

screen`; // 等同于下面这一行 // type Screen = 'md screen' | 'xs screen' | 'mobile screen' | 'desktop screen'; 当我们定义了一个具体的字面量类型...利用带有 as 子句的模板文字类型 (source) JSX 工厂函数 JSX 代表 JavaScript XML,允许我们使用 JavaScript 编写 HTML 元素并将其放置 DOM ,...递归条件类型 另一个新增功能是递归条件类型,允许它们分支引用自己,从而能够更灵活地处理条件类型,使得编写递归类型别名更加容易。...要解决这个问题,必须在 Promise 给 resolve 提供至少一个,否则,确实需要不带参数的情况下调用 resolve() 的情况下,必须使用显式的 void 泛型类型参数声明 Promise...}); 条件展开将会创建可选属性 JavaScript ,展开运算符 { ...files } 不会作用于假,例如 files 为 null 或者 undefined。

3.9K10

正确的Webpack配置姿势,快速启动各式框架!

一般来说,Angular我们将是启动.bootstrap()的文件,Vue则是new Vue()的位置,React则是ReactDOM.render()或者是React.render()的启动文件...12345678 // webpack1里使用loader属性,webpack2为rules属性module.exports = {module: {rules: [{test: /\....autoprefixer-loader): 自动添加兼容前缀(-webkit-、-moz-等) url-loader/file-loader: 修改文件名,放在输出目录下,并返其对应的url url-loader在当文件大小小于限制...默认为: 1234567 resolve: {extensions: [".js", ".json"]// 当我们需要使用typescript的时候,需要修改:extensions: [".js",...".ts"]// 当我们需要使用React,还要修改:extensions: ['.ts', '.tsx', '.js']} 2. resolve.alias 创建import或require的别名

1.5K30

如何在 TypeScript 中使用函数

当我函数体返回字符串TypeScript 正确地假定我们的函数具有字符串返回类型。...如果我们将鼠标悬停在编辑器的 userFullName 常量上,编辑器会将其类型识别为字符串。 TypeScript 的可选函数参数 创建函数并不总是需要所有参数。... JavaScript ,这通常是通过有一个参数来完成的,该参数可以采用不同类型的,如字符串或数字。将多个实现设置为相同的函数名称称为函数重载。...现在,当我们将鼠标悬停在这些函数上,将为每个重载显示注释,如下面的动画所示: 用户定义的类型保护 本教程将检查 TypeScript 函数的最后一个特性是用户定义的类型保护,它们是允许 TypeScript...我们还将 value 参数的类型设置为 any,因此,适用于任何类型的

14.9K10

Angular 5.0.0发布!

构建优化器是CLI的一个工具,基于我们对你Angular应用的理解,可以把构建后的包变得更小。 构建优化器有两个主要任务。...执行https://angular.io 的递增AOT构建,新编译器管道可节省95%的构建时间(我们开发机上测试的结果是从40多秒减少为不到2秒)。...保留空白 过去编译器会忠实地复现并在模板包含制表符、换行符和空白。现在你可选择是否组件和应用包含空白了。 可以每个组件的装饰器中指定这个配置,而当前的默认为true。...@angular/common推出过HttpClient,用于Angular中发送请求,小巧易用。...表单对应用很重要,如果有服务端验证,或者验证或更新会触发较慢的操作,你当然希望少跑几次。现在你可以控件层面控制验证和更新的时机了,也可以表单层面设置

4.4K40

2018 前端趋势:更一致,更简单

setState 返回一个承诺(promise)——如果你需要 setState 同步,并且你一个异步/等待的环境,你会发现这对形影不离的鸳鸯对子非常美好。...现代网络开发过程设置并协调所有工具相当复杂,所以,Boilerplate 项目 React 社区内总是受到欢迎。大多数人会建议用户直接克隆项目文件,就地起炉灶。 新手常常茫然不知所措。...尽管谷歌对就项目的支持何时结束还不明确,但是在过去的官方说法已表明对其的支持,主要的 web 流量转向 angular.io 而非 angular.org 之前是不会停止的。...通过近来发布的版本,可以有趣的看到 Angular 新的一年竟会更加受到欢迎。尽管还很难说有多少,但是当你看到 NPM 的下载量的时候,Angular 并没有看起来增长的那么多。...通常的观点是,Vue 不需要你去使用 JSX ,也不像 Angular,它不会强制要求你使用 TypeScript的模板语言也同 Angular 的相当类似。

1.4K20

Top JavaScript Frameworks & Topics to Learn in 2017

Callbacks(回调): 回调是当另一个函数用于在有结果就绪准备执行的函数。 就像你说,“做你的工作,做完后给我打电话。 Promises: Promise 是处理异步回调的一种方式。...当函数返回一个promise,你可以promise解析之后使用.then()方法来附加回调函数。 解析的被传递到你的回调函数,例如doSomething()。...TypeScript*: avaScript的静态类型。完全可选,除非你学习Angular 2。 如果你不使用 Angular 2,你应该在选择TypeScript之前仔细评估。...使用双向绑定, DOM 渲染过程(称为 Angular 1的摘要循环)对 DOM的 更改可能会在绘制完成之前重新触发绘图阶段,从而导致回流和重绘 - 从而降低性能。...因为其中一个重要标准是,“在工作能被真正的用上”。 是的,这是一个人气竞赛,但当你思考学习的时间投入什么上,了解一个框架的时机变得格外重要。 为了回答这个问题,我看了一些关键指标。

2.2K00

30个小知识让你更清楚TypeScript

var num:number = 1; let是 TypeScript 声明变量的默认方式。与var相比,let减少了编译错误的数量并提高了代码的可读性。...Mixins 允许你通过组合以前类更简单的部分类设置来构建新类。 相反,类A继承类B来获得的功能,类B从类A需要返回一个新类的附加功能。...你可以使用 juggle-check,检查 null 和 undefined,或者使用 strict-check,返回true设置为null的,并且不会评估true未定义的变量。...TypeScript 还可以与大多数与 JavaScript 相同的技术接口,例如 Angular 和 jQuery。 19、TypeScript 的 JSX 是什么?...当你不确定函数将接收多少参数,这很有用。其余符号之后的所有参数...都将存储一个数组

4.7K20

30道TypeScript 面试问题解析

var num:number = 1; let是 TypeScript 声明变量的默认方式。与var相比,let减少了编译错误的数量并提高了代码的可读性。...Mixins 允许你通过组合以前类更简单的部分类设置来构建新类。 相反,类A继承类B来获得的功能,类B从类A需要返回一个新类的附加功能。...你可以使用 juggle-check,检查 null 和 undefined,或者使用 strict-check,返回true设置为null的,并且不会评估true未定义的变量。...TypeScript 还可以与大多数与 JavaScript 相同的技术接口,例如 Angular 和 jQuery。 19、TypeScript 的 JSX 是什么?...当你不确定函数将接收多少参数,这很有用。其余符号之后的所有参数...都将存储一个数组

4.3K20

30个小知识让你更清楚TypeScript

var num:number = 1; let是 TypeScript 声明变量的默认方式。与var相比,let减少了编译错误的数量并提高了代码的可读性。...Mixins 允许你通过组合以前类更简单的部分类设置来构建新类。 相反,类A继承类B来获得的功能,类B从类A需要返回一个新类的附加功能。...你可以使用 juggle-check,检查 null 和 undefined,或者使用 strict-check,返回true设置为null的,并且不会评估true未定义的变量。...TypeScript 还可以与大多数与 JavaScript 相同的技术接口,例如 Angular 和 jQuery。 19、TypeScript 的 JSX 是什么?...当你不确定函数将接收多少参数,这很有用。其余符号之后的所有参数...都将存储一个数组

3.6K20

浅谈 Angular 项目实战

使用 Angular 开发需要非常多的前置知识,比如 TypeScript、RxJS 等,所以学习成本比较高,这也是很多人望而却步的一个原因。...联调接口,可能还会遇到传输 Cookie 的问题,具体可以参见 关于 Angular 跨域请求携带 Cookie 的问题。...然而复选框的 value 只有 true 或者 false,而 select 多选框的 value 就是数组。所以 Vue 对复选框的多选操作进行了处理,而 Angular 没有,需要你自己处理。...关于异步开发的历史面试中有遇到过,可以说的东西很多,比如回调函数、Promise、迭代器和生成器、async 和 await,除此之外,RxJS 的可观察对象(Observable)应该是下一个更强大的异步编程方式...Angular 官网对可观察对象(Observable)和承诺(Promise)进行了对比。 需要特别注意的就是,只有当订阅 Observable 的实例才会开始发布

4.5K00
领券