开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

组件$onInit()在$onInit- angularjs 1.6.x中看不到变量

组件$onInit()是AngularJS 1.6.x中的一个生命周期钩子函数，用于在组件初始化时执行一些操作。在该函数中，可以进行变量的初始化、数据的获取、事件的绑定等操作。

在AngularJS 1.6.x中，组件的控制器(controller)中定义了$onInit()函数，该函数会在组件初始化时自动调用。在该函数中，可以访问到组件的变量。

如果在$onInit()函数中无法看到变量，可能有以下几种原因：

变量未在组件的控制器中定义：确保变量在控制器中正确定义，以便在$onInit()函数中访问。
变量未正确绑定到组件的模板中：检查组件的模板文件，确保变量正确绑定到模板中，例如使用双向绑定语法{{variable}}。
变量在$onInit()函数之前被修改或赋值：$onInit()函数是在组件初始化时调用的，如果变量在该函数之前被修改或赋值，可能无法在$onInit()函数中看到最新的值。确保在$onInit()函数之前不要修改或赋值该变量。

总结起来，组件$onInit()函数是AngularJS 1.6.x中的一个生命周期钩子函数，用于在组件初始化时执行一些操作。如果无法在$onInit()函数中看到变量，需要检查变量的定义和绑定，并确保在$onInit()函数之前不要修改或赋值该变量。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
腾讯云网络安全（DDoS 防护、Web 应用防火墙等）：https://cloud.tencent.com/product/ddos

相关搜索:在react属性中看不到子组件在Tmux配置中看不到/未使用Shell变量在docker-compose.yml中看不到环境变量在筛选器菜单中看不到字符串变量 Python os库在Windows中看不到环境变量 Typescript在泛型类型声明中看不到导入的变量 Plunker中的角度2在路径中看不到我的组件 Laravel-mix在vue组件中看不到连接的图片<img src="">在刀片文件中看不到存储在变量中的Laravel 5.4图像url 调试R代码时，为什么在环境窗格中看不到局部变量？为什么我在pdb中看不到我的argparse变量的布尔值？为什么当我进入另一个组件(角度2/4/5)的Subject调用的订阅方法时，在控制台中看不到我的根变量组件？为什么我在调试器C# UWP VS2017中看不到局部变量？在使用Webpack+Karma+Jasmine进行AngularJS单元测试的spec.js中找不到变量angular Angular:由document.execCommand添加的<ol>在styles.css中只能看到css规则，但在组件的css中看不到。

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

自定义View（一）

（下面这些名称只是讲解使用，不要强行对号入座） onInit->onMeasure->onLayout->onDraw 首先，我们构造了一个view，这个new的动作是系统帮你完成的（xml->code...）的过程，然后走入它的构造函数,构造里面调用onInit,onInit完成数据的初始化，比如拿到自定义的属性值，文本信息等等。...1：在项目根节点的build.gradle 引入仓库地址，（现在可以省略这一步，库已经加入默认仓库）。...2：在自己的项目build.gradle 引入开源库 3：自定义个view 继承BaseView ，完成它的所有复写方法。...在initView函数完成其他变量的初始化。这里我们看下测量代码：我偷懒了，直接返回给过来的值。这个值是父类能给到的最大值。

5596 0

Angular 6.x 快速入门

在 Angular 中，我们可以通过 Component 装饰器和组件类来创建自定义组件。...基础知识定义组件的元信息在 Angular 中，我们可以使用 Component 装饰器来定义组件的元信息： @Component({ selector: 'my-app', // 用于定义组件在...它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。 ngIf 指令语法 ......它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。 ngFor 指令语法 ......declarations: [AppComponent, UserComponent], bootstrap: [AppComponent] }) export class AppModule { } 模板变量语法

14.1K2 0

Angular 6.x 基础教程

ng g c simple-form -it -is 即 Angular CLI 在创建组件时，自动帮我们添加了前缀。...这时，我们可以引入 $event 变量，具体如下： import {Component, OnInit} from '@angular/core'; @Component({ selector:...第八节 - 使用双向绑定使用过 AngularJS 1.x 的同学，应该很熟悉 ng-model 指令，通过该指令我们可以方便地实现数据的双向绑定。...第十节 - 组件样式在 Angular 中，我们可以在设置组件元数据时通过 styles 或 styleUrls 属性，来设置组件的内联样式和外联样式。...用过 AngularJS 1.x 的同学，对 ng-class 应该很熟悉，通过它我们能够根据条件，为元素动态的添加或移除对应的样式。在 Angular 中，对应的指令是 ngClass 。

15.6K2 0

Angular 2 版本的 ng-bootstrap 初体验

Angular 2 版本的 ng-bootstrap 初体验最近 angular-ui 团队终于正式发布了基于 Angular 2 的 Bootstrap 界面库 ng-bootstrap ，工作中一直用 AngularJS...{ ngOnInit() { } } ng-bootstrap 以指令 (directive) 的形式提供组件，方便在 html 视图中使用，选择器 (selector) 使用同一的前缀...接下来就可以使用 ng-bootstrap 的组件了，接下来以 NgbAlert 为例说明 ng-bootstrap 的用法。...再来一个稍微复杂一点儿的，在 app.component.ts 文件中添加下面的代码： export class AppComponent implements OnInit { alert...不过总的来说， ng-bootstrap 的推出将会极大的推进 Angular 2 在实际项目中的应用，而不只是停留在 demo 阶段，因为 AngularJS 1.x 时期，很多项目都是以 AngularJS

1.5K2 0

AngularJs之数据绑定

个人拙见：AngularJa使用中感觉最给力的是去掉了DOM操作假设在我们访问的页面中需要显示后台读取的数据，通常情况下我们是使用ajax请求数据后，通过DOM操作元素将数据显示在组件上 AngularJs...1.在.ts中新建一个类(特别像java8)，如图所示: ? 分别是商品的id、商品名称、商品价格、商品星级、商品描述、商品类别 2.在oninit()中初始化数据如图所示： ?...3.在页面中使用 *ngFor=“let product of products ” products 代表在.ts中生命的对象名称 product 表示将要使用的数组别名通过插值表达式引入数值{{product.id...}}将数组显示在组件上如图所示： ?

6271 0

Angular 自定义管道

在该示例中，我们将定义一个 FileSizePipe 管道，它用于实现对文件大小进行格式化显示。...image/jpg' }, { name: 'background.png', size: 1784562, type: 'image/png' } ]; } } 需要注意的是与 AngularJS...其实，要实现上述的功能，除了在页面模板中使用管道之外，我们也可以在页面渲染前，对数据源进行处理。...下面我们来介绍在组件类中，如何使用管道服务：配置 Provider： import { FilesizePipe } from '....{{ file.name }} {{ file.size | filesize }} 组件类中使用管道

1.5K2 0

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

如果您在AngularJS中有一些背景知识，那么您知道存在控制器，指令和组件，这些控制器，指令和组件在某种程度上类似于指令但更简单，允许您升级到Angular 2.对于那些没有那种精彩体验的用户他们并找出什么地方...之外，如果我们再看看我们的组件代码，我们会看到title = 'app';。所以，如果你已经在模板语言中做过一些练习，或者已经和AngularJS一起工作，那么这里发生的事情是非常明显的。...让我们开始工作 - 让我们开始添加一个变量来保存我们的新卡： [...] export class NewCardInputComponent implements OnInit { [...] public...如果您以前曾使用过AngularJS，那么您可能会知道双向数据绑定的概念。或者，您可能已经在所有那些华丽的AngularJS演示中看到了它，您可以在其中输入要输入的值并为我们更新页面内容。...与AngularJS不同，Angular不再是一个MVC框架。这是一个基于组件的框架。组件在这里担任控制器的角色，但仅限于非常简化的抽象级别。什么是RxJS？

42.6K1 0

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

模板表达式的变量来源模板本身的变量指令的上下文变量组件的成员信息（属性 or 方法）在使用模板表达式时，如果变量名在多个来源中都存在的话，则模板变量是最优先的，其次是指令的上下文变量，最后是组件的成员...通过使用 $event 作为方法的参数会将许多用不到的模板信息传递到组件中，导致我们在仅仅是为了获取数据的前提下，却需要对于页面元素十分了解，违背了模板（用户所能看到的）与组件（应用如何去处理用户数据）...，因此要确保一个模板中的引用变量名称是唯一的，同时，在声明引用变量时，也可以使用 ref- 代替 # <input type="text" ref-refMsgInput (keyup)="getRefMsg...4.4.3、父<em>组件</em>获取子<em>组件</em>信息使用 @ViewChild 装饰器获取 <em>在</em>子<em>组件</em>上定义一个模板引用<em>变量</em> 父<em>组件</em>内容： 1、使用 @ViewChild 装饰器获取子<em>组件</em>数据...-- <em>在</em>子<em>组件</em>上定义一个模板引用<em>变量</em> --> <em>在</em>父<em>组件</em>中添加对于 ViewChild

15.8K3 0

angular知识点梳理第三篇-组件

声明一个变量【parent.component.ts】第二步：在父组件的html视图层文件中引入子组件【parent.component.html】第三步：在子组件中的ts文件中使用@Input...进行接收父组件的值【children.component.ts】第四步：在子组件的视图层文件中进行变量值的获取【children.component.html】传递整个父组件在父组件的视图层文件中实现...进行节点获取第一步：在父组件引入子组件的地方添加节点值【parent.component.html】第二步：在子组件中声明一些需要传递的变量【children.component.ts】第三步...关系理清了，下面我们开始演示父子组件之间的传值当前的结构是app引入了parent、parent引入了children 父组件传值(函数)给子组件第一步：在parent组件的ts文件中声明一个变量...() } } 第四步：在子组件的视图层文件中进行变量值的获取【children.component.html】 <!

2.2K1 0

前端人员该怎么面试经典Angular面试题有哪些

AngularJS是一个JavaScript框架，是一个以JavaScript编写的库。它可通过 1、解释Angular 2应用程序的生命周期hooks是什么?...例如，ngOnint界面的OnInit方法，这个方法必须在组件中实现。 #FormatImgID_0# 2、事件发射器如何在Angular 2中工作的?...在Angular2中，组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中，我们可以通过使用事件发射器api来发出事件。...简而言之，EventEmitter是在@ angular/core模块中定义的类，由组件和指令使用，用来发出自定义事件。 3、如何优化Angular 2应用程序来获得更好的性能?...AngularJS中你可以创建自己的服务，或使用内建服务。

4.1K8 0

Angularjs进阶笔记（2）-自定义指令中的数据绑定

自定义指令在Angularjs项目中主要有两大用途： 1.封装指定组件的DOM操作 Angularjs期望的开发方式是将DOM的操作尽可能封装在自定义指令中，这样对于局部变量的操作会更容易加入到Angular...2.组件化 Angularjs靠自定义指令实现组件化。...诸如你在React和Vue中看到的类似于,这样的自定义标签，或是父级子级传值所使用的prop，又或者是标记组件自身状态的state，在Angularjs中全部都是通过自定义指令来实现的。二....当使用自定义指令时，常常需要将一个变量的值从controller传递至directive中，此时需要在scope属性中进行变量绑定设置，Angularjs提供了3种不同的绑定方式（实际上也可以直接传递True...这其实是很不方便的，换位思考一下，你使用Angularjs的时候，会先去源码里找一下对应的方法开头都定义了哪些变量，哪些可以修改吗？当然不会。

2.1K2 0

AngularJS7那些不得不说的事故

在AngularJS7中使用JQuery.js/Bootstrap等第三方功能库这几个包是在使用传统html页面的时候常用的，JQuery.js在很多的框架中已经不建议使用了，而是使用框架的组件或组件通讯类功能来完成相似的功能...Bootstrap则有很多社区提供的AngularJS化的组件库可以直接使用。 ...对于前者，虽然的确感觉上在AngularJS中使用JQuery没有哲学上那么完美，但你不得不说在很多情况下的确用起来更方便，能大量的简化代码。...对于后者，我个人的感觉把BootStrap库AngularJS组件化会带来额外的学习成本，感觉并不划算。...此外就是通常我们使用import都是标准的typescript的形式，比如： import { Component, OnInit } from '@angular/core'; 而我们对于JQuery.js

1.5K1 0

ASP.NET中DesignMode属性

这样设计的原则是合理的，因为在OnPreRender这一类事件中我们主要引入一些资源文件（JavaScript/Css/Pictures），在IDE设计器状态下这些文件路径是取不到的，它要根据当前运行的服务器虚拟路径来找到相应的文件名...；还有，在Load，比如Page控件的PageLoad事件中，开发人员会将任意可能的代码放在这里执行，比如引用了服务端的上下文环境等，这时就会报"取不到信息"的异常错误。...由于在OnInit中调用的自定义函数里，访问了与服务器相关的变量，如Request，Response，Session，Server等，因为在设计模式时，这些变量是不会存在的，因此进行调用就会引发异常，从而导致这个错误的发生...解决方案: 一个是检查HttpContext.Current是否为空；第二个就是不重写这样的页面流程函数，而改在事件中检查采用第一种 protected override void OnInit...OnInit (e); } } 另外有一种方法为 protected override void OnInit (EventArgs e) { base.OnInit

1.2K2 0

Angular 组件通信

前端开发，很大程度上是组件化开发，永远离不开组件之间的通信。那么，在 Angular 开发中，其组件之间的通信是怎么样的呢？举一反三，Vue 和 React 中大同小异本文纯文字，比较枯燥。...> 在父组件中调用子组件，这里命名一个 parentProp 的属性。...: string; constructor() { } ngOnInit(): void { } } 子组件接受父组件传入的变量 parentProp，回填到页面。 <!...是因为我们在子组件中初始化后就进行了 emit，这里的异步操作是防止 Race Condition 竞争出错。我们还得在组件中添加 fromChild 这个方法，如下： <!...所以在父子组件中，一进来就会打印 msg 的初始值 null，然后过了一秒钟之后，就会打印更改的值 Jimmy。同理，如果你在子组件中对服务的信息，在子组件打印相关的值的同时，在父组件也会打印。

2K2 0

angular框架如何实现父子组件传值、非父子组件传值

[msg]="message"> [msg]中的属性名随意定义，message是父组件中定义的一个变量或方法子组件引入@input模块： import {...implements OnInit{ @Input msg:string } 即在组件的类中用Input修饰符接收数据以上三步就完成了父组件给子组件传递数据。...调用子组件，给子组件定义一个名称 #号后面加一个变量名，组成模板变量在父组件中引入viewChild： import {...Component,OnInit,ViewChild } from '@angular/core'; export class NewsComponent implements OnInit{...@viewChild("msg") msg:any; } 下面就可以使用msg来调用子组件中通过msg传过来的数据在父组件通过msg调用子组件数据即可下面看实际操作：第一步：在引入子组件的命令中声明模板变量

1.5K2 0

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

响应式表单建立表单由组件隐式的创建表单控件实例在组件类中进行显示的创建控件实例表单验证指令函数在表单数据发生变更时，模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新，...，从而生成错误信息列表在进行用户输入数据有效性验证时，在控件上通过添加一个模板引用变量来暴露出 ngModel，从而在模板中获取到指定控件的状态信息，之后就可以通过获取错误信息列表来进行反馈 <div...在数据验证失败的情况下，对于系统来说，表单是不允许提交的，因此可以将提交事件绑定到表单的 ngSubmit 事件属性上，通过模板引用变量的形式，在提交按钮处进行数据有效性判断，当无效时，禁用表单的提交按钮...4.3.2、通过 FomGroup 组合多个控件一个表单不可能只有一个控件，通过在组件中构造 FormGroup 实例来完成对于多个表单控件的统一管理在使用 FormGroup 时，同样在组件中定义一个属性用来承载控件组实例...，在设定规则时，需要将模板中控件名对应的数据值的第二个参数改为验证的规则在响应式表单中，数据源来源于组件类，因此应该在组件类中直接把验证器函数添加到对应的 FormControl 的构造函数上。

18.9K2 0

Spring国际认证指南|了解如何使用 AngularJS 检索网页数据

AngularJS 客户端将通过index.html在浏览器中打开文件来访问，并将在以下位置使用接受请求的服务： http://rest-service.guides.spring.io/greeting...$scope和$http组件。...它使用该$http组件在“/greeting”处使用 REST 服务。...在 index.html 中，有两个这样的属性在起作用：标记具有ng-app指示的此页面是 AngularJS 应用程序的属性。...http://localhost:8080 ，您会在其中看到：每次刷新页面时，ID 值都会增加。

2.4K3 0

angular知识点梳理第二篇-基本语法

imports: [FormsModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 在需要使用数据绑定的组件进行数据的处理.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个需要绑定的变量 public inputData...}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的，所以这里是比较容易理解的，简单的演示一下在需要使用数据绑定的组件进行数据的处理.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个list类型的变量，用于验证NgFor.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个boolean类型的变量，用于验证ngif

2.5K3 0

使用Angular8和百度地图api开发《旅游清单》

组件每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。...每个组件都会定义一个类，其中包含应用的数据和逻辑，并与一个 HTML 模板相关联，该模板定义了一个供目标环境下显示的视图比如： import { Component, OnInit } from '@...reject(status) } }); }) } } 复制代码定义jsonp回调和接收数据变量...，定义好之后在app.module.ts中引入： // material组件库 import { CustomMaterialModule } from '....未完善的部分：添加清单时，如果添了不符合规范的地址或者百度地图查不到的地址，因该出现错误提示，这块会在后期优化。

6K3 0

Angular 英雄编辑器

CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。...ngOnInit 是一个生命周期钩子（lifecycle hook），Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...在 src/app 文件夹中为 Hero 类创建一个文件，并添加 id 和 name 属性。...打开浏览器的开发工具，就会在控制台中看到如下信息： Uncaught Error: Template parse errors:Can't bind to 'ngModel' since it isn't...声明 HeroesComponent 每个组件都必须声明在（且只能声明在）一个 NgModule 中。你没有声明过 HeroesComponent，可为什么应用却正常工作呢？

2.6K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭