无法访问NgOnInit -Angular 6中的输入属性
NgOnInit是Angular框架中的一个生命周期钩子函数，用于在组件初始化完成后执行一些初始化操作。它是一个接口，需要在组件类中实现。
在Angular 6中，如果无法访问NgOnInit中的输入属性，可能有以下几个原因：
- 输入属性未正确绑定：在组件的HTML模板中，确保正确地将输入属性绑定到组件的属性上。例如，使用方括号将输入属性绑定到组件属性：
[inputProperty]="value"。 - 输入属性未正确声明：在组件类中，确保正确地声明输入属性，并为其提供一个初始值。例如，使用@Input装饰器声明输入属性：
@Input() inputProperty: type = defaultValue。 - 输入属性在父组件中未正确传递：如果NgOnInit中的输入属性是通过父组件传递的，确保在父组件中正确地传递该属性。例如，使用属性绑定将父组件的属性传递给子组件：
<child-component [inputProperty]="parentProperty"></child-component>。 - 组件的生命周期钩子函数未正确实现：确保在组件类中正确地实现NgOnInit函数，并在其中访问输入属性。例如，使用ngOnInit函数来访问输入属性：
ngOnInit() { console.log(this.inputProperty); }。
如果以上步骤都正确无误，但仍然无法访问NgOnInit中的输入属性，可能是由于其他代码逻辑或配置问题导致的。可以进一步检查组件的其他部分，例如模板文件、其他生命周期钩子函数等，以确定问题的根本原因。
对于Angular开发，腾讯云提供了一系列云服务和产品，可以帮助开发者构建和部署Angular应用。其中，推荐的腾讯云产品包括：
- 云服务器（CVM）：提供可扩展的虚拟服务器，用于部署和运行Angular应用。了解更多：云服务器产品介绍
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，用于存储和管理Angular应用的数据。了解更多：云数据库MySQL版产品介绍
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储和管理Angular应用的静态资源文件。了解更多：云存储产品介绍
- 人工智能平台（AI Lab）：提供丰富的人工智能算法和模型，可用于开发和集成人工智能功能到Angular应用中。了解更多：人工智能平台产品介绍
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行。
相关·内容
尝试将数据传递给子组件时，我可以将属性附加到模板中，但似乎无法访问组件类中的id。有什么想法吗？
-父母--
<related-products [id]="product.id"></related-products>
--孩子
import {Component, OnInit, Input} from 'angular2/core';
import {RouteParams, Router} from 'angular2/router';
import {ProductService} from '..
浏览 0提问于2016-04-26得票数 0
下面是我的Angular 2组件代码示例
@Component({
selector: 'author-edit',
templateUrl:'./author/edit'
})
export class AuthorEditComponent implements OnInit{
@Input() author: AuthorModel;
fg: FormGroup;
constructor(
public formBuilder: FormBuilder
) {}
ngOnInit() {
浏览 5提问于2017-03-03得票数 0
回答已采纳
由于某些原因，即使我尝试使用ngOnInit()方法，也无法访问属性的@Input值。
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required poly
浏览 3提问于2016-03-28得票数 2
回答已采纳
我一直在尝试在演示/示例中使用指令运行ContentChild，但我一直遇到指令不工作的情况。没有抛出错误。我在StackBlitz上复制了这个场景，也遇到了同样的问题：https://stackblitz.com/edit/angular-contentchild-directive-etktcd 为什么我的子输入仍然是“未定义的”？ 以下是指令： import { Component, Directive, Input, ContentChild, OnInit, OnDestroy, forwardRef, AfterContentInit} from '@angular/co
浏览 13提问于2019-06-29得票数 1
回答已采纳
下面是OnChanges生命周期事件在angular2文档中的解释。
ngOnChanges -在ngOnInit之前以及当数据绑定输入属性值更改时.
下面是我的示例组件代码
@Component({
selector:'app-main',
template:`
<user-form>Loading....</user-form>
`,
directives: [userFormComponent],
providers: [HTTP_PROVIDERS,UserService]
})
export clas
浏览 4提问于2016-08-08得票数 0
回答已采纳
我有两个组成部分。
父组件和子组件，我需要将两种类型的数据传递给子组件.一个数据是JSON，第二个数据是字符串。
子组件
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child',
template: `<h1>{{header}}</h1>
<p>{{data}}</p>`,
})
export
浏览 4提问于2016-09-25得票数 2
回答已采纳
我正在尝试使用输入绑定将数据从父组件传递到子组件。它是一个简单的布尔型字段。我遵循这个角度来完成它，但是我仍然不能获得从父组件到子组件的任何东西。
我也不知道是否值得一提，一开始我得到了下面的错误，然后我在我的应用程序模块中添加了schemas: NO_ERRORS_SCHEMA，然后它就消失了。
下面是我想要传递的变量的父component.ts代码：
public isAnAuthorizedUser: boolean = true;
ngOnInit(): void {
if (test != null) {
console.lo
浏览 0提问于2017-09-29得票数 0
我是新的角和使用角FormControl，并面临一些问题如下。
我只有一个输入文本与所需的验证器。根据用户输入的内容，如果文本有效，我希望启用一个按钮。如果输入文本无效，我想禁用按钮。
运行此操作时，禁用按钮永远不会启用。请查收，让我知道一些建议。
这是我的密码。我用的是角反应形式。
sample.html：
<label for="name">Name: </label>
<input type="text" [formControl]="userName" required>
<p>Value:
浏览 11提问于2022-10-21得票数 0
回答已采纳
我已经使用Angular 8创建了一个web组件(让我们将其命名为测试组件)，它接收输入并将其显示给浏览器(test.component.html文件) <h3>{{title}}</h3> test.component.ts文件接收输入，并将其记录在控制台中 export class TestComponent implements OnInit {
@input() title;
constructor() {}
ngOnInit() {console.log(this.title)}
} 使用web组件的独立应用程序的index.html如下所示：
浏览 21提问于2020-01-08得票数 0
回答已采纳
这是确切的错误：输入'string‘不能分配到输入'string’。类型'null‘不能分配到输入’string‘. is (2322)(属性) NavbarComponent.loggedInUser: string
这是我的代码：
/* navbar-component-ts */
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { Router
浏览 2提问于2021-07-24得票数 0
回答已采纳
1回答
如何创建用于着色和显示输入数字值的指令。重要的部分是用来检测变化和对输入值变化作出反应的指令。
下面是我的示例代码：
//our root app component
import {Directive, Component, NgModule, Input, OnInit, OnDestroy, ElementRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
浏览 0提问于2017-01-27得票数 1
回答已采纳
4回答
我对AngularJS相当陌生(使用2稳定)。我有一个现有的PHP/Codeigniter3应用程序，我的工作是制作一个SPA。我遇到了一个问题，我根本无法访问路由器参数来将它们添加到templateUrl中。
例如：
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
@Component({
selector: 'apps_container',
//
浏览 5提问于2016-09-30得票数 0
回答已采纳
我使用ionic 5和angular 9，并使用angular Router在页面之间移动。但这导致了一个问题，在ionic中，不会再次调用ngOnInit。我知道ionic中有一个NavController，以及它抛出的生命周期事件...但我需要知道是否有办法使用angular Router并让ngOnInit再次被调用。 一些代码来解释..。 第1页： goToPerson(person){
this.router.navigateByUrl("/personProfile", {state:person, replaceUrl:true});
} 第2页： ngOnIn
浏览 38提问于2020-07-28得票数 0
在播放完视频之前，我无法访问视频元素属性。 我目前正在检查ngOnInit中的视频时长和返回的NaN值。 我用来获取持续时间的代码行是： HTML： <video src="myvid.mp4" #vid></video> TypeScript： @ViewChild('vid') vid: ElementRef
ngOnInit(){
//vid is of type ElementRef
this.duration = this.vid.nativeElement.duration
}
浏览 12提问于2019-12-10得票数 0
我有一个表单输入，我想要blur (解除焦点)，并在一个按钮被点击时为空。
在AngularJS中，我在控制器中这样做：
angular.element('#search-input').val('');
angular.element('#search-input').blur();
在Angular (4.4.4)中，我让它这样工作：
$('#search-input').val('');
$('#search-input').blur();
但我不想使用jQuery。在Angular中做这件事
浏览 2提问于2017-10-26得票数 3
我有一个如下声明的组件，它接收一个输入数据。我使用的是Primeng日历组件，这个组件是它创建的，但我无法访问数据以将其传递给模板我收到一个错误(ngModel)="data.DateValue"，就像访问它时DataValue还不存在一样
遗漏了什么？
如何在接收到输入数据后设置Date类型的辅助值( myDateValue: Date )？
提前谢谢。
import { Component, Input} from '@angular/core';
import { DataType } from "../model/dataType";
浏览 8提问于2017-08-14得票数 0
回答已采纳
2回答
我正在工作的一个项目，我们正在建设一个网站使用平均堆栈。我目前正在前端工作，并试图从API中读取数据，并将数据存储在一个数组中，然后可以访问和使用该数组。我遇到了一个很奇怪的问题。
我的目标是加载一个包含世界上所有国家的纬度和经度坐标的数据阵列。
我有这样的服务：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Coun
浏览 10提问于2021-05-06得票数 0
回答已采纳
使用Angular 4，我必须创建一个动态输入字段，用户可以在其中添加和删除输入字段。
但是我得到了一个问题，相同的ngModel被分配给所有的输入域，并在添加或删除按钮上设置输入域重置。
Angular Html代码：
<h3> Dynamic Input </h3>
<form (ngSubmit)="SubmitFnc($event)">
<div *ngFor="let ItmVar of inputAryVar; let IdxVar=index" [attr.Idx]="IdxVar"&
浏览 0提问于2018-09-02得票数 0
回答已采纳
3回答
在我添加了一个名为ngInit的函数，它将在服务类中调用getCountries函数之后，我得到了这个"Type‘Object“不能分配到输入’null‘错误。
import { Component, OnInit } from '@angular/core';
import {MessageService} from './message.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
sty
浏览 15提问于2022-06-20得票数 0
参考这里的Angular2文档文件： (父级到子级设置器)，我有以下子组件代码：
import { Component, Input } from '@angular/core';
@Component({
selector: 'name-child',
template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
private _name = '';
@Input()
set name(nam
浏览 1提问于2016-12-16得票数 11
回答已采纳
在我的angular应用程序中，我提出了一种情况，只有当输入绑定到更改时才应该调用ngOnchanges。那么，有没有办法在ngOnInit之前停止ngOnChanges的执行呢？有没有办法做到这一点。提前谢谢。
浏览 0提问于2017-03-30得票数 46
回答已采纳
我在工作中打开了一个angular 10项目。过了一段时间，当我看到HMR添加到angular 11中时，我通过尝试使用HMR来升级项目。由于没有，我打开了一个全新的angular项目。已检查HMR是否正常工作。我移动了所有的组件、服务、模块、样式(当然没有node文件夹)，并使用ng serve --hmr启动了它，但它再次无法工作。正在刷新页面。
我在这两天。有什么想法会很感谢你吗？谢谢。我的包JSON是：
{
"name": "date-manager-ui",
"version": "0.0.0",
"
浏览 2提问于2021-03-10得票数 3
我正试着与Angular2 + Dart打交道。我遇到了一种奇怪的情况，就是我试图让自己的头转到-I上，在刷新页面之前，我似乎无法访问RouteParams。详情如下：
这是我的路线：
const Route(
path: '/game/:id',
name: 'Game',
component: GameComponent
)
在我的游戏模板中：
<a [routerLink]="['Game', {id: 76043}]">
这就是我的Game
浏览 0提问于2016-03-09得票数 2
回答已采纳
我正在用Angular构建一个web组件。我的目标是评估web组件的使用者是否提供了给定的输入，在本例中为"accessToken“。但是，输入在ngOnInit()中未定义，但在ngOnChanges()中打印
_accessToken;
@Input('accessToken')
set accessToken(accessToken: string) {
this._accessToken = accessToken;
console.log(accessToken); // This prints the
浏览 6提问于2020-05-24得票数 1
2回答
我是新的角2和类型标，我是呼气与构造函数和ngOnInit。
为什么我可以在构造函数中使用matchMedia：
import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, Component} from '@angular/core';
/** @title Responsive sidenav */
@Component({
selector: 'sidenav-responsive-example',
templateUrl: '
浏览 7提问于2017-12-29得票数 1
回答已采纳
1回答
角形不能检测到值的变化。
、、、
我不知道为什么表单不工作！输入不改变表单中的值。
而valueChanges没有检测到任何东西。有什么帮助吗？
应用于stackblitz：
import { Component, VERSION } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
@Component({
selector: "my-app",
template: `
<form [formGroup]="form
浏览 3提问于2021-03-06得票数 2
回答已采纳
我对角很陌生，所以如果这是一个显而易见的问题，请原谅我。
经过大量的尝试和错误，我设法正确地降低了我的新Angular2组件的级别，以便它在我的Angular1.4应用程序中工作。而且这个组件大部分都能工作。唯一的问题--这是一个大问题--是组件忽略了我在模板级别给它的所有输入。
我想问题是我把它们传进来的方式。我想我可能是意外地使用了Angular2来传递它们而不是Angular1，但是我在验证这一点时遇到了困难。我所知道的是，当我从ngOnInit()内部检查我的@ the ()变量的值时，它们显示为未定义的，即使我是通过模板传递硬值。
(很抱歉这里的格式设置，否则代码似乎不会呈现为文本)
浏览 1提问于2016-12-22得票数 6
回答已采纳
我有一个父组件，它正在将信息传递给子组件，但它是未定义的。如果这是Angular 101，我很抱歉，但是我如何延迟子组件渲染或运行任何javascript，直到它有了所需的输入？ 拉入数据的父组件ngOnInit： public ngOnInit(): void {
this.productService.getProductById(1).subscribe(product => {
this.product = product;
});
} 父组件HTML： <child-component [product]="pr
浏览 52提问于2020-11-20得票数 0
回答已采纳
1回答
角分量参数函数
、、
我怎么能说我的angular2组件可以接收作为参数的函数？
未明错误:模板解析错误:无法绑定到“单击”，因为它不是“输入”的已知属性。(“minlength=”{minlength}})
错误->click="{{click}}“
“)ng://AppModule/InputTextComponent.html@12:2
ComponentInput.ts
import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
浏览 6提问于2017-11-09得票数 1
回答已采纳
Angular默认提供生命周期钩子ngOnInit()和ngOnChanges()。既然我们已经有了一个ngOnInit，为什么要使用ngOnChanges呢？还有构造函数。
浏览 0提问于2018-06-08得票数 9
回答已采纳
我是Angular的新手，只是一个关于生命周期钩子方法的问题。我知道：
在Angular为指令声明的所有输入属性设置了初始值之后，调用ngOnInit()。
当输入属性的值发生更改时，也就是在调用ngOnInit方法之前，调用ngOnChanges()。
假设我们有一个输入属性，比如：
// custom directive class
@Input("pa-attr")
numOfProduct: number;
和
//template.html
<tr [pa-attr]="getProducts().length ...
我单击add按钮并添加
浏览 9提问于2019-10-31得票数 2
sample.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.scss']
})
export class Sample i
浏览 0提问于2020-04-24得票数 1
回答已采纳
1回答
我正在为Angular上的一个类编写代码，我不明白为什么从我的组件中提取@Input装饰器会导致整个应用程序无法加载。
import { Component, OnInit, Input } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
import { Params, ActivatedRoute } from '@angular/router&
浏览 37提问于2018-06-07得票数 -1
回答已采纳
我有一个用于单击按钮的BehaviorSubject，但我正在设法在header组件中键入一个输入字段，然后在页面上的输出组件中实时输出输入字段，而不必单击按钮进行传输。它应该在我打字的时候传送。任何帮助都是非常感谢的！
search.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class SearchService
浏览 5提问于2019-10-28得票数 0
回答已采纳
如何实现这一点？
My SubComponent
import {Component,Input,ngOnInit} from 'angular2/core';
@Component({
selector: 'my-component',
template: `
<div>In child component - myAttr = {{ myAttr1 }}</div>
`
})
export class MyComponent {
@Input() myAttr: number;
myAttr1:number;
浏览 2提问于2016-05-12得票数 3
回答已采纳
假设我的自定义Angular组件上有几个@Inputs：
@Input()
public set inputOne(value: string) { ... }
@Input()
public set inputTwo(value: string) { ... }
@Input()
public set inputThree(value: string) { ... }
如果我在我的模板上设置了多个：
<my-component inputOne="Hello" inputTwo="World" inputThree="!">&l
浏览 3提问于2018-05-23得票数 0
我将ionic2与angular2结合使用，并且我有一个用form built构建的表单，但我希望检测特定输入的新变化。
ionViewDidLoad() {
this.purchaseDataForm = this.formBuilder.group({
kms: ['', Validators.required],
lts: ['', Validators.required],
price: ['', Validators.required],
total: ['', Validators.
浏览 2提问于2016-11-24得票数 4
回答已采纳
我需要将我们在表单中输入的所有表单值存储在本地存储中。为此，我将设置表单值，并在获取表单数据之后推送表单值。但是，当我试图推送数据时，它总是被新输入的表单数据所取代。我需要组件中的所有表单值。我怎么能这么做？
input.html
<form [formGroup]="messageForm" (ngSubmit)="onSubmit()">
<input type="text" class="form-control" id="initiativename" formControlName=&#
浏览 2提问于2019-02-25得票数 0
回答已采纳
简而言之..我无法访问我的新闻对象。当在函数中调用时，它返回为“未定义”。 在我的ngOnInit中，我有两个订阅。第一个返回一个新闻对象(定义为组件顶部的一个全局变量)。 第二个订阅返回一个路由参数，然后触发一个函数(navigateToArticle)。 现在..。当第二个订阅触发'navigateToArticle‘函数时，我希望该函数能够访问新闻对象。 但是，每次我尝试通过控制台记录新闻对象时，它都返回为“未定义”。现在我明白了这是因为订阅是异步的。 所以我的问题是，我如何才能确保新闻对象已经被加载并且可以被'navigateToArticle‘函数访问。可能是某种检
浏览 15提问于2019-04-12得票数 5
回答已采纳
2回答
我在学习Angular 4的时候遇到了这个小问题，我试着阅读了组件之间的数据传输，也试着阅读了2种绑定方式--似乎都不起作用。
我将发布父组件和子组件的.ts和.html文件
父.ts文件：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-cca-bank',
templateUrl: './cca-bank.component.html',
styleUrls: ['./cca-bank.component.cs
浏览 0提问于2018-04-12得票数 0
import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public
浏览 0提问于2019-11-12得票数 1
回答已采纳
我在Angular 4中有一个组件，以及一个模板来更改这个组件被调用的路径，但不会加载任何没有服务器调用的内容。如果我将ngOnInit()方法的内容放入构造函数中，它就能正常工作。似乎没有调用ngOnInit。任何人，请帮助我正在工作，因为过去的2天。
这是我的路由配置。
const testRouting: ModuleWithProviders = RouterModule.forChild([
{ path:'createtest/:id', component:TestComponent, resolve: { test:TestResolver }}
浏览 0提问于2017-06-29得票数 7
回答已采纳
这是my.component.ts文件，我每次输入"?“时都有问题。在我的html文件{{ forms?.contactNumber }}中，错误消失了，但数据没有显示。我需要切换sidenav来显示数据，这很奇怪
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular
浏览 0提问于2019-12-30得票数 1
这个问题以前问过多次，我对所提供的所有解决方案都感到满意。但我被困在基本问题上了。如何将数据从父组件获取到子组件。不知道我做错了什么！
app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./
浏览 3提问于2020-02-27得票数 1
回答已采纳
1回答
这里是我的App.component.ts文件，在这里我将“用户”发送到“header”组件作为输入。
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AuthService } from '../../core/auth/auth.service';
import { User } from '../../core/models/User';
import { Subscription, Observable, BehaviorSubject } fr
浏览 2提问于2020-04-12得票数 0
回答已采纳
4回答
我在用Angular 6。
我有一个组件HeaderComponent，它的html包含一个输入字段，如
header.component.html
<form>
<input (keyup)="search($event)">
</form>
<app-search-result-card *ngIf="searchQuery.length > 3"
[searchQuery]="searchQuery">
</app-se
浏览 1提问于2018-12-18得票数 0
回答已采纳
1回答
你好，我刚接触过角，有个小问题，下面是我的代码：
import { Component, OnInit,Input, SimpleChange, OnChanges } from '@angular/core';
import { Sensor } from '../../shared/sensor.model';
import { MessageService } from '../../shared/message.service';
@Component({
selector: 'app-sensor-list',
浏览 0提问于2018-08-23得票数 1
回答已采纳
我正在尝试在一个angular应用程序的根组件中读取以下内容
<app-root [something]="'sometingvalue'">Loading...</app-root>
我用下面的方法获得了angular组件
export class AppComponent {
something: string = 'abcd';
title: string = 'app works!';
elm: ElementRef;
constructor(elm: Elem
浏览 2提问于2016-10-25得票数 0
1回答
我正在使用Angular ...but创建登录页面，在输入登录详细信息后无法访问目标页面。下面给出了login.component.html文件的代码片段
<form *ngSwitchCase="'Login'">
<h3>Login</h3>
<label>Email:</label>
<br>
<input type="text" name="email" [(ngModel)]='
浏览 9提问于2020-05-23得票数 0
回答已采纳
我有一个角度组件： import { Component, OnInit, Inject } from '@angular/core';
import {FormBuilder, FormGroup,Validators,FormArray,FormControl,} from '@angular/forms';
@Component({
selector: 'app-collaborator-detail',
template: `
<h1> This is form</h1>
&l
浏览 10提问于2019-03-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
