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

为什么调用方法后在ngOnInit中会得到空数组?

在Angular中,ngOnInit是一个生命周期钩子函数,它会在组件初始化完成后被调用。通常情况下,我们会在ngOnInit中进行一些初始化操作,例如获取数据、订阅事件等。

如果在ngOnInit中调用的方法返回了一个空数组,可能有以下几个原因:

  1. 异步操作:如果调用的方法是一个异步操作,例如从服务器获取数据,那么在ngOnInit中立即访问该方法返回的结果可能会得到空数组。这是因为在ngOnInit被调用时,异步操作可能还没有完成。解决这个问题的方法是使用Observable或Promise来处理异步操作,并在操作完成后再访问结果。
  2. 生命周期顺序:如果调用的方法依赖于其他生命周期钩子函数的执行结果,那么在ngOnInit中访问该方法返回的结果可能会得到空数组。这是因为ngOnInit是在其他生命周期钩子函数之前被调用的。解决这个问题的方法是将依赖的操作放在适当的生命周期钩子函数中执行,确保它们在ngOnInit之前完成。
  3. 数据未初始化:如果调用的方法依赖于组件中的某个属性或变量,而该属性或变量在ngOnInit被调用时还没有被初始化,那么访问该方法返回的结果可能会得到空数组。解决这个问题的方法是确保在调用方法之前,相关的属性或变量已经被正确初始化。

总结起来,调用方法后在ngOnInit中得到空数组可能是由于异步操作、生命周期顺序或数据未初始化等原因造成的。在解决这个问题时,需要仔细检查代码逻辑,确保方法的调用时机和依赖关系正确,并且相关的数据已经被正确初始化。

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

相关·内容

Rxjs&Angular-退订可观察对象的n种方式

为了避免内存泄漏,适当的时机对可观察对象进行退订是非常重要的; 本文会向你展示各种angular组件中退订可观察对象的方法!...方式一 "常规"的取消订阅的方式 最简单的订阅和取消订阅一个可观察对象的方式是 ngOnInit 方法中订阅可观察对象(Observable), 然后组件类中创建一个类属性用来保存这个订阅(Subscription...简单起见, 我们可以使用Subscription.EMPTY来初始化一个订阅对象(Subscription), 这样可以防止取消订阅时遇到引用对问题....首先, 组件类中使用new Subscription()实例化创建一个字段, 然后调用该实例的 Subscription.add 方法, 最后 ngOnDestroy 中取消订阅....我们的示例中, 我们希望组件被销毁发出通知, 所以我们给组件类添加一个叫 componentDestroyed$ 的字段, 它的类型是 Subject, 这个字段承担了通知人(notifier

1.2K00

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

使用模板表达式时应该遵循如下的原则 简单:正常情况下,应该将业务逻辑或是数据运算放到组件中,模板表达式只作为属性或方法调用 快速执行:模板表达式得出的数据应该快速结束,否则就会对于用户体验造成影响...组件中使用服务 需要使用的组件中引入服务,然后组件的构造函数中通过依赖注入的方式注入这个服务,就可以组件中完成对于这个服务的使用 父组件中对数据进行赋值,然后调用服务的方法改变数据信息...被绑定的输入属性值发生变化时触发,会调用多次;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...ngAfterContentInit 组件内容渲染完成调用一次 ngAfterContentChecked 只要组件的内容发生改变就会被调用 ngAfterViewInit 视图加载完成触发一次,...一般用来对视图的 dom 元素进行操作 ngAfterViewChecked 视图发生变化时调用组件的生命周期中会调用多次 ngOnDestroy 只销毁组件时调用一次,一般用来组件销毁前执行某些操作

15.8K30

从 Angular Route 中提前获取数据

\n\n### 你为什么应该使用 Resolver\n\nResolver 路由跟组件之间扮演着中间件服务的角色。...假设你有一个表单,没有数据时,你想向用户一个的表单,当在加载用户数据时展示一个 loader,然后当数据返回时,填充表单并隐藏 loader。...\n\n ngOnInit() 中操作,我们需要在每个需要的组件加载,在其路由页面中添加 loader 展示。Resolver 可以简化 loader 的添加使用。...\n\nloader 通常是 ngOnInit() 中编写所有的 AJAX 请求,但是逻辑将会在 resolver 中实现,替代 ngOnInit()。...然后 resolver 中底调用,接着路由中配置 resolve信息,(页面将会等待)直到 resolver 被处理。 resolver 被处理之后,我们可以通过路由来获取数据然后展示组件中。

6.2K30

AngularDart 4.0 高级-生命周期钩子 顶

例如,OnInit接口有一个名为ngOnInit的钩子方法,Angular创建组件立即调用: lib/src/peek_a_boo_component.dart (ngOnInit) class PeekABoo...该方法接收当前和前一个属性值的SimpleChanges对象。 ngOnInit之前调用并且每当有一个或多个数据绑定输入属性发生变化时调用。...ngOnInit Angular首次显示数据绑定属性并设置指令/组件的输入属性,初始化指令/组件。 第一次ngOnChanges之后调用一次。...当ngOninit运行时,它们将被设置。 ngOnChanges方法是您第一次访问这些属性的机会。 ngOnInit之前Angular会调用ngOnChanges ...并在此之后多次调用。...它只调用一次ngOnInit。 您可以期待Angular创建组件立即调用ngOnInit方法。 这就是深度初始化逻辑所属的地方。

6.2K10

JavaScript数组方法和es6数组方法

js数组常用方法: export class TemplateFormsComponent implements OnInit { constructor() { } ngOnInit...(this.testArr)//5-1 //返回改变数组 //unshift() 方法开头)向数组添加新元素,并“反向位移”旧元素 console.log(this.testArr.unshift...() { //forEach() 方法为每个数组元素调用一次函数(回调函数) //回调函数可以接收3个参数,数组内元素,数组索引,数组本身,第1个参数必传,后面可选择性传入...console.log(this.testArrNumber.filter((item) => { return item > 2 }))//5 //reduce() 方法每个数组元素上运行函数...+ item }, 100))//8 //every() 方法为每个数组元素调用一次函数,检查所有数组值是否通过测试,回调函数可以接收3个参数,数组内元素,数组索引,数组本身,第1个参数必传,

64430

Angular 从入坑到挖坑 - 表单控件概览

:control、group 和 array,用于组件类中分别生成 FormControl、FormGroup 和 FormArray 使用 FormBuilder 构建的控件,每个控件名对应的值都是一个数组...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件的 getter 方法,从而在模板中通过此方法来获取到指定控件的状态信息 import { Component, OnInit...4.4、表单的自定义数据验证 4.4.1、自定义验证器 很多的情况下,原生的验证规则无法满足我们的需要,此时需要创建自定义的验证器来实现 对于响应式表单,我们可以定义一个方法,对控件的数据进行校验,之后将方法作为参数添加到控件定义处即可...验证方法中,当数据有效时,返回 null,当数据无效时,则会返回一个对象信息,这里的 nameinvalid 就是我们模板中获取到的错误信息的 key 值 <div class="form-group...{ 'nameInvalid': true } : null; } } 当实现了继承的 validate <em>方法</em><em>后</em>,就可以<em>在</em>模板的控件上添加该指令

18.9K20

Angular2 -- 生命周期钩子

每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的。比如,OnInit接口的钩子方法叫做ngOnInit。...指令和组件 ngOnInit:当Angular初始化完成数据绑定的输入属性,用来初始化指令或者组件。 ngOnChanges:当Angular设置了一个被绑定的输入属性触发。...ngAfterContentChecked:当Angular检查完那些投影到自己视图中的外来内容的数据绑定之后调用。 ngAfterViewInit:Angular创建完组件的视图调用。...ngAfterViewChecked:Angular检查完组件视图中的绑定调用。...生命周期的顺序 ngOnChanges:当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit之前。 ngOnInit第一轮ngOnChanges完成之后调用

75720

Angular 服务

getHeroes(): void {  this.heroes = this.heroService.getHeroes();}  ngOnInit 中调用它 你固然可以构造函数中调用 getHeroes...而是选择 ngOnInit 生命周期钩子中调用 getHeroes(),之后交由 Angular 处理,它会在构造出 HeroesComponent 的实例之后的某个合适的时机调用 ngOnInit。... HTTP 教程中,你将会调用 HttpClient.get() 它也同样返回一个 Observable,它也会发出单个值,这个值就是来自 HTTP 响应体中的英雄数组...从 HeroService 中发送一条消息 修改 getHeroes 方法获取到英雄数组时发送一条消息。...组件的 ngOnInit 生命周期钩子中调用 HeroService 方法,而不是构造函数中。 你创建了一个 MessageService,以便在类之间实现松耦合通讯。

3.3K70

基础 | Angular2生命周期钩子函数

比如,OnInit接口的钩子方法叫做ngOnInit, Angular创建组件立刻调用它 生命周期执行顺序 ngOnChanges 在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges...如果有输入属性,会在ngOnInit之前调用。...ngOnInit 组件初始化的时候调用,只调用一次,第一次调用ngOnChanges之后调用 ngDoCheck 组件定义的属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍...),会在ngOnChanges()和ngOnInit()之后 ngAfterContentInit 组件内容初始化之后调用第一次ngDoCheck之后调用,只调用一次 ngAfterContentChecked...Angular中的组件就是基于class类实现的,Angular中,constructor用于注入依赖。 ngOnInit是Angular中生命周期的一部分,constructor执行。

75440

Angular 英雄编辑器

ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 创建完组件很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...修改的 HeroesComponent 类应该是这样的: src/app/heroes/heroes.component.ts import {Component, OnInit} from '@angular...位于管道操作符( | )的右边的单词 uppercase 表示的是一个插值绑定,用于调用内置的 UppercasePipe。 管道(Pipes) 是格式化字符串、金额、日期和其它显示数据的好办法。...声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 中。 你没有声明过 HeroesComponent,可为什么应用却正常工作呢?.../heroes/heroes.component'; HeroesComponent 也已经声明了 @NgModule.declarations 数组中。

2.5K50

Angular 英雄编辑器

ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 创建完组件很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...修改的 HeroesComponent 类应该是这样的: src/app/heroes/heroes.component.ts import {Component, OnInit} from '@angular...位于管道操作符( | )的右边的单词 uppercase 表示的是一个插值绑定,用于调用内置的 UppercasePipe。 管道(Pipes) 是格式化字符串、金额、日期和其它显示数据的好办法。...声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 中。 你没有声明过 HeroesComponent,可为什么应用却正常工作呢?.../heroes/heroes.component'; HeroesComponent 也已经声明了 @NgModule.declarations 数组中。

2.6K70
领券