问题标签 [ngoninit]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
440 浏览

angular - 每次打开组件时如何调用函数?

我有一个连接到 firebase 数据库并下载所有项目的应用程序,然后这些项目显示在如下表格中:

在此处输入图像描述 此表仅在我登录时显示,但一旦我移动到另一个组件并返回到带有表的组件,数据就不再加载。

我认为那是因为我在 onInit() 函数中有以下代码:

基本上只是读取数据并将其添加到数组中。然后如果数组长度> 0,则数据将显示在表格中:

我试图通过使用来解决这个问题

但没有任何改变。所以..有没有办法在每次加载组件时调用函数,或者我的问题与另一件事有关?

0 投票
2 回答
255 浏览

javascript - Angular 中 ngOnInit() 上的动态创建类字段

我尝试在类中动态创建变量来存储值并在 ngModel 和其他地方使用它。我知道,我可以像这样为 ngOnInit() 中的变量赋值

但我有一些问题 - 我从服务器 API 获取我的字段,但不知道我得到了什么和多少项目。我只能在获取后解析服务器响应并为新变量赋值。

我不能这样做(TS2540:无法分配给“名称”,因为它是常量或只读属性。)

如何在 ngOnInit() 或其他地方为我的班级分配新字段?(我想我可以在构造函数中做到这一点,但文档说我不应该将它与对 API 的 Observable 调用和其他困难的事情一起使用)

0 投票
1 回答
927 浏览

javascript - ngOnInit 中的引用错误

我在控制台中收到一个错误,说明ERROR ReferenceError: sortedArr is not defined在我定义它并对其进行排序之后。

这是我的 app.component.ts 文件:

已排序的对象数组绑定到我的 Web 应用程序页面上的 HTML,但它不在控制台中。当我刚刚定义并排序了这个数组时,为什么我会得到一个 ReferenceError?

我问的真正原因是因为我需要对这个对象数组做一些不同的事情才能让它正确地与我的 HTML 一起运行。它允许我通过我编写的函数对其进行排序,但我不能在sortedArray变量上调用另一个方法,因为它说它没有定义。

0 投票
0 回答
5060 浏览

angular - Angular:函数调用构造函数

我正在关注这个 auth0 教程,它在那里说:

身份验证服务的 handleAuth() 方法必须在 app.component.ts 构造函数中调用,这样它将在我们的应用程序初始化时运行:

但是,像这样的文档和答案说:

大多数情况下,我们ngOnInit用于所有初始化/声明,并避免在构造函数中工作。构造函数应该只用于初始化类成员,而不应该做实际的“工作”。

在本教程中,作者确实在 app.component.ts 上使用了 ngOnInit 来运行处理布局响应部分的代码:

为什么要使用不同的初始化方法?在这种情况下,构造函数内部的函数调用是否有某种用途?

而且,如果我说错了,请纠正我。我是新手。任何输入表示赞赏。

0 投票
1 回答
1332 浏览

angular - 即使绑定正在工作,也无法读取未定义错误的属性

因此,我的 Web 应用程序中有一个下拉列表,我连接到我的服务 api 调用,它将使用位置列表填充下拉列表。

我创建了服务并使用 httpclient 设置了 Observable。

然后我调用服务来获取 api 调用的结果并绑定到我的 location 属性。

例如在我的component.ts文件里面ngOnInit()我有这个:

在我的 component.html 文件中:

当我加载页面时,我注意到它在几分之一秒内加载很奇怪,然后自行纠正并正确加载。我检查了我的下拉列表,发现它正确绑定了我想要的位置列表,并且我可以很好地选择它。看起来挺好的!但是,当我检查元素 > 控制台时,我看到了这个错误:

因此,虽然绑定和结果工作正常,但我不确定为什么会出现控制台错误。我认为这与 Angular 生命周期有关,ngOnInit()但我不确定如何正确解决此问题。我应该调用我的服务而不是ngOnInit()其他地方吗?解决此问题的最佳做法是什么?

0 投票
2 回答
925 浏览

angular - 组件在 NgOnInit 完成之前渲染?

我有一个组件,它对调用 api 的服务执行一些调用。组件在这些调用完成之前呈现,导致页面为空。

这是来自组件的代码:

这是页面中的代码:

这是我的服务中的功能:

我没有错误。请求已加载(通过 console.log 检查)。唯一的问题是页面在数据加载完成之前呈现。

有任何想法吗?

提前致谢!

0 投票
1 回答
961 浏览

angular - Angular 2+ - 自动在所有 ngOnInit 上运行相同的代码

也许这个问题的答案也与 AngularJS (1.x) 有关,但我的问题是针对 Angular 2 及更高版本的。

众所周知,每个组件文件都有自己的 ngOnInit 函数,该函数在组件初始化时运行其中的代码。在我当前的应用程序中,我需要在所有这些函数、所有组件中自动运行相同的代码。现在,我只是为每个组件的 TS 文件复制这些函数之间的代码。有没有办法把这段代码放在一个公共的地方,然后让所有这些初始化函数从那里自动运行它?这意味着,即使是添加到应用程序中的全新组件也会运行此代码,作为其初始化函数的一部分......

0 投票
1 回答
775 浏览

angular - Angular5:ngOnInit 只在路由上调用一次

我有这个基本的应用程序,我可以在其中使用数据服务从 Firestore 中获取数据。我有几个页面(组件),球队,球员,统计......

例如我的团队组件:

在 ngOnInit 中,我将数据加载到局部变量中,但是一旦我导航到另一个页面然后返回,数据就消失了。我确实需要刷新页面以重新加载数据。

我应该如何解决这个问题?

0 投票
2 回答
1776 浏览

angular - 当我们谈论 OnInit 时,Angular 2+ 中组件初始化的确切含义是什么?

根据 Angular.io Angular Documentation on Life cycle hooks OnInit 的目的:在 Angular 首先显示数据绑定属性并设置指令/组件的输入属性之后初始化指令/组件。

那么当说组件已经初始化时到底会发生什么。这是否意味着所有变量都已初始化或显示组件的模板或两者兼而有之?

0 投票
5 回答
12998 浏览

angular - Angular ngOnInit() 和 ngOnChanges() 有什么区别?

Angular 默认提供生命周期钩子 ngOnInit() 和 ngOnChanges()。如果我们已经有一个 ngOnChanges,为什么还要使用 ngOnInit?还有构造函数。