@Input属性更改Angular 6时出现问题
@Input属性是Angular框架中的一个装饰器，用于在组件之间传递数据。当@Input属性在Angular 6中发生更改时，可能会出现一些问题。
问题可能出现在以下几个方面：
- 组件之间的数据传递：@Input属性允许父组件向子组件传递数据。当@Input属性发生更改时，需要确保父组件正确地更新数据，并且子组件能够正确地接收和处理这些更改。
- 变更检测机制：Angular使用变更检测机制来检测组件中的数据变化，并相应地更新视图。当@Input属性发生更改时，需要确保变更检测机制能够正确地检测到这些变化，并更新相应的视图。
- 生命周期钩子函数：Angular提供了一系列的生命周期钩子函数，用于在组件的不同生命周期阶段执行特定的操作。当@Input属性发生更改时，可以使用ngOnChanges()生命周期钩子函数来监听这些变化，并执行相应的操作。
为了解决这些问题，可以采取以下措施：
- 确保正确使用@Input属性：在父组件中使用@Input装饰器将数据传递给子组件时，确保属性名称和类型的一致性，并在子组件中正确声明和使用@Input属性。
- 监听@Input属性的变化：在子组件中使用ngOnChanges()生命周期钩子函数来监听@Input属性的变化，并在变化发生时执行相应的操作。
- 手动触发变更检测：在父组件中，当@Input属性发生更改时，可以使用ChangeDetectorRef服务手动触发变更检测机制，以确保视图能够正确地更新。
- 使用Angular提供的其他特性：Angular提供了许多其他特性，如模板引用变量、事件绑定、属性绑定等，可以结合使用这些特性来解决@Input属性更改时可能出现的问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，适用于各种规模的应用。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
请注意，以上链接仅为示例，具体产品和服务选择应根据实际需求进行评估和选择。
相关·内容
2回答
我有一个主要模块：
app.component.html
<h1>{{globals.title}}</h1>
<router-outlet></router-outlet>
app.module.ts
@NgModule({
imports: [
BrowserModule,
HomeModule,
NotesModule,
NgbModule,
RouterModule.forRoot([
{
path : '',
浏览 0提问于2017-08-23得票数 0
回答已采纳
在重构我的AngularJS代码以使用“控制器作为”语法之后，我无法让我的指令工作。
旧工作代码()：
<div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>
<input auto-complete ui-items="names" ng-model="selected"/>
selected = {{selected}}
</div>
</div>
浏览 2提问于2014-10-19得票数 4
回答已采纳
我使用的是，而且我遇到了一个问题，即Visual无法识别带有类型记录导入模块的Angular2，这一切都很好：
上面写着：
找不到‘angular2 2/platform/browser’模块
我的应用程序：
是编译没有错误的.ts文件。
它在浏览器中运行，没有错误。
如果我在VS代码中打开项目，它可以正常工作，IDE中没有错误。
我知道类型记录应该直接从node_modules -> angular2 读取.d.ts文件，但是无论如何，我尝试添加angular2，但仍然没有工作。
Atm使用VS 2013更新5，安装了类型记录1.5 (我也尝试了
浏览 6提问于2015-12-21得票数 6
回答已采纳
我在努力学习ngOnChanges。
世界上最小的角模板驱动形式：
<form (ngSubmit)="onSubmit()">
<input type="text" [(ngModel)]="hero" name="hero">
<input type="submit" value="Submit">
</form>
它的TypeScript组件类：
import { Component, Input, OnChanges, SimpleCh
浏览 5提问于2020-12-28得票数 0
回答已采纳
我有一个ListComponent和EntryComponent，用于在列表中附加一个项目。当通过DataService将项推入列表时，列表不会在ListComponent中更新。对于angular2的工作方式有什么想法吗？
名单处：
import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
public items:Array<any> = [];
addItem(item:string):void{
this.item
浏览 2提问于2016-02-09得票数 0
4回答
这是一个简单的href，它不能在Angular和ionic中工作。无控制台错误。
<label class="item item-input item-stacked-label" style="text-align:center">
<a class="button button-outline button-positive" href="#/app/nutrition" style="width:300px;">
SUBMIT
</a>
浏览 0提问于2016-06-21得票数 0
我在角度11中使用了一个材料数据选择器(确切的版本见下面)，我在min/max属性上遇到了问题。
my-component.component.html
<form [formGroup]="form">
<mat-form-field>
<mat-label>Date</mat-label>
<input [matDatepicker]="picker"
[max]="maxDate"
[min]="mi
浏览 2提问于2021-02-14得票数 0
回答已采纳
我有代码工作的onInit，但不是onChanges。
以下是组件中的代码
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
export class FetchDataComponent implements OnChanges {
site: string[] = [];
@Input() values: string = "https://angular.io";
onEnter(value: string) { thi
浏览 0提问于2018-08-17得票数 1
所以我做了很多研究，但我就是搞不懂。
我想使用角材质窗体控件来制作文本框组件。
在这个之后，我实现了如下
textbox.component.html
<mat-form-field>
<input matInput type="text" [placeholder]="placeholder" [(ngModel)]="value" />
<mat-error>This field is required</mat-error>
</mat-form-field>
te
浏览 0提问于2019-04-20得票数 6
回答已采纳
我需要将角度材料输入的高度修改为最小值。
这是因为我需要在一个小盒子(500px，它位于屏幕底部)中插入许多输入，但我需要输入的高度不会改变盒子的高度，然后我需要避免发生以下两种情况之一：
1-框变小，导致发送按钮和其他输入不在屏幕上。
2-如果框的高度配置为百分比(高度:80%)，则在框的右边框中显示滚动控件。
代码如下：
<!doctype html>
<html lang="en">
<head>
<title>FORM</title>
<!-- Firebase -->
<script s
浏览 0提问于2016-10-27得票数 1
我是Angular的新手，只是在ngOnChanges上有一个问题。我知道ngOnChanges()方法接受一个参数(包含来自“@angular/ SimpleChange”的核心)，我们可以这样检索最新的变更值：
import { Directive, ElementRef, Input, SimpleChange } from "@angular/core";
...
@Input("pa-attr")
bgClass: string;
ngOnChanges(changes: { [property: string]: SimpleChange })
浏览 2提问于2019-10-31得票数 0
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angul
浏览 0提问于2016-11-12得票数 0
我使用的是Angular 6。我想像这样使用ngModel：
<input type="text" [(ngModel)]="textValue">
在html上，我得到了以下错误：
Can't bind to 'ngModel' since it isn't a known property of 'input'
当我搜索时，我了解到我必须导入FormsModule。因此，在我的包json中，我添加了如下的angular形式：
"dependencies": {
浏览 0提问于2018-06-15得票数 5
回答已采纳
当我编译我的角度应用程序时，它可以工作，但是HTML页面是空白的，我的应用程序不会显示。我以前也遇到过这样的问题，通常都是进口产品之一，但我现在不确定。当我使用Google检查时，我看到的错误是record.factory不是函数。有人熟悉这件事吗？
以下是我的module.ts代码：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from '
浏览 1提问于2020-03-28得票数 0
回答已采纳
1回答
我有以下输入元素：
<input
range
[btnClass]="'close_input_button'"
type="text"
class="reset-border-right"
formControlName="parentId1Name"
/>
如您所见，我使用指令：
range [btnClass]="'close_input_button'"
指令看起来像这
浏览 9提问于2019-10-31得票数 1
回答已采纳
我在MainCtrl中有一个对象，并通过单向绑定将其传递给子组件。当我在子模板中更改它时，在MainCtrl中更改父对象。我的问题在哪里？
(function(angular) {
'use strict';
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
this.hero = {
name: 'Spawn'
};
});
})(window.angular);
(function(angular) {
浏览 3提问于2017-06-29得票数 1
回答已采纳
我使用的是Ionic v2.1.8，当我运行命令"npm install“时，我会看到很多类似下面这样的警告：
C:\xampp\htdocs\AppFineMobile>npm install
npm WARN @angular/compiler@2.4.8 requires a peer of @angular/core@2.4.8 but none was installed.
npm WARN @angular/compiler-cli@2.4.8 requires a peer of @angular/core@2.4.8 but none was installed.
浏览 0提问于2017-03-27得票数 0
4回答
我使用@input从父组件接收属性，以便在子组件的元素中激活CSS类。
我能够从父级接收属性，并激活类。但这只管用一次。我从父组件接收到的属性是一个布尔数据类型，当我将它的状态设置为子组件的false时，它在父组件中不会改变。
Plunkr：
app.ts
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HeaderComponent } from './header'
浏览 9提问于2017-01-04得票数 95
回答已采纳
我创建了一个示例项目，在其中我使用了组件，一个带有注册名，另一个具有登录名，同时验证注册页面，给出下面提到的错误。
当表单验证时，错误发生。
>Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
</div>
<div>
<input type="email" name="emailId" pla
浏览 1提问于2018-03-23得票数 2
回答已采纳
1回答
有一个Angular指令，它应该只允许在input中包含数字。它的代码如下：
import {
Directive,
ElementRef,
HostListener,
ChangeDetectorRef,
Renderer2
} from "@angular/core";
@Directive({
selector: "input[onlyNumbers]"
})
export class OnlyNumbersDirective {
constructor(private elementRef: ElementRef, priv
浏览 6提问于2020-05-24得票数 0
4回答
我试图在angular2上做一些事情，但是我无法找到关于这种行为的一些东西。
我有一个实现自定义组件的应用程序，如下所示：
import {Component,Input} from 'angular2/core'
@Component({
selector:'my-comp',
template:`<input type="text" style="text-align:center; [(ngModel)]="inputText"> <p>{{inputText}
浏览 7提问于2016-01-05得票数 16
回答已采纳
1回答
我正在尝试通过实验来学习角2，我发现ngOnChanges不会在下面的代码中触发：
app.component.ts:
import { Component, Input } from "@angular/core"
import { FormsModule } from '@angular/forms';
import { OnChanges, SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
selector: 'my-a
浏览 0提问于2018-04-08得票数 2
在执行以下代码时，我会得到标题中的错误。我知道这是一个非常微小的错误，但无法在任何其他线程中找到解决方案。我正在自学，需要你的帮助。
app.component.html
<app-person [person]="Person"></app-person>
我有一个包含以下代码的person.component.ts
person.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Person } from './per
浏览 0提问于2018-08-15得票数 0
回答已采纳
在加载angular.min.js时，我在控制台中得到一个错误(错误:拒绝访问受限URI )。我想是因为同样的原产地政策，但我对此并不熟悉，也不知道该如何运作。我需要设置服务器还是什么的？
这是我的HTML：
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-cloak>
<head>
<meta charset="utf-8">
<title>my app</title>
<meta na
浏览 0提问于2016-08-11得票数 0
回答已采纳
在我的Angular 4项目中，我从父组件传递了一个值，该值是通过服务调用传入的。子组件正在接收该值，并且在我的HTML中也可用。但是当我在我的子组件typescript文件中安慰传递的值时，它显示为undefined。
下面是我的代码片段：
restaurantlayout.component.ts (主元件ts文件)：
import { Component, OnInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Restau
浏览 2提问于2018-05-04得票数 1
我是Angular2/4的新手，我已经创建了一个带有输入域的基本组件。用户输入将反映在绑定到用户输入的其他组件中。现在我想设置一个通用的监听器来改变值。
我认为OnChanges钩子将是完美的解决方案，但是ngOnChanges方法从未被调用过。我做错了什么吗？
任何提示都很感谢...
import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<input
浏览 1提问于2017-06-27得票数 26
回答已采纳
将ng-model添加到单选按钮集似乎会改变在Tab键切换时聚焦的输入。使用IE11 (11.842.10586.0)和Angular 1.6.3 (虽然它也出现在早期版本的Angular中)进行了测试。
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body>
<div ng-app=&#
浏览 2提问于2017-04-08得票数 2
3回答
我目前是第一次使用Angular。我有一个名为Api-Lab的模块和一个名为Category-Card的组件。我的项目的结构是：
-app
-[+]api-lab
-[+]category-card
category-card.component.ts
api-lab.component.ts
api-lab.module.ts
app.module.ts
app.routing.ts
在api-lab.component.html中，我在这部分HTML代码的标题中得到了错误：
<div cl
浏览 25提问于2019-11-15得票数 2
回答已采纳
我创建是为了检查一种奇怪的行为:尝试执行
element.addClass('someclass')
app.directive('svgElement', function () {
return {
restrict: 'AE',
replace:true,
template:
'<svg height="100" width="100">' +
'<circle class="chart__circle" cx="
浏览 5提问于2015-02-22得票数 1
回答已采纳
我只是在我自己的项目上创建了一个新组件，但是我总是收到相同的错误消息。我确信注入代码是正确的，模块和组件导出逻辑也是正确的。我不明白是怎么回事。
custom-header.component.ts
import {Component, Input, ViewEncapsulation} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'custom-header',
templateUrl: './cust
浏览 1提问于2022-04-10得票数 1
刚得到一个代码，看到代码正在工作，但是在ng-model中，作者使用user.name或user.email等，但是那些属性从来没有在controller.........then中声明过，它是如何工作的？
如何通过这种方式将用户信息传递给控制器功能ng-click="update(user)"？
代码
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
Name: <input type="t
浏览 0提问于2016-03-27得票数 4
回答已采纳
2回答
设计md-输入元素
、、、、
我正在尝试对.md-input-element on md-input进行样式设计，默认情况下，它是从angular-material.css添加的，而angular-material.css似乎无法工作。我试着添加字母间距的样式，但它只起作用于当前。控制台上的样式。有没有办法在我自己的css文件中覆盖md-input-element的这种特殊样式？
我的html代码如下：
<!-- Input Name* -->
<div class="mdl-grid">
<div cla
浏览 0提问于2016-11-25得票数 0
回答已采纳
我在b-form-datalist中使用b-form-input。输入文本框将动态添加(每行一个)。
首先，它列出了一些条目。一旦选择了一个值，所选的值将使用v-model添加到列表中。
<div id="app">
<div v-for="(chosen, index) in chosenValues" :key="chosen.value + '-' + index">
<b-col cols="4">
<b-form-input
浏览 2提问于2019-11-13得票数 0
我试图将此链接用作构建通知系统的参考：
第一步是运行：
npm install angular-notification-icons --save
我不知道我要走什么路才行？我试图在我的项目路径中运行它，但是我得到了这个错误：
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "angular-notification-icons" under a package
npm ERR! also called "angular-notification-icons". Did
浏览 1提问于2019-12-06得票数 0
回答已采纳
我有一个这样的角度组件： import { Component, Input } from '@angular/core';
@Component({
selector: 'picture',
templateUrl: './picture.html',
})
export class Picture {
@Input() pictureUrl: string;
} <img src="{{pictureUrl}}" /> 问题是，当pictureUrl输入属性更改时，Angular只会更改<im
浏览 16提问于2020-01-22得票数 0
1回答
我正在尝试为表单中的输入元素编写一个属性指令，如果给定的用户名可用与否，它将验证它。
我有两个问题这样做。
1)我希望使这个指令可重用，允许它接收它应该使用的验证用户名的API路由。这是我所拥有的，正如您所看到的，它不接受任何输入(没有绑定)，而且工作非常完美。
import { Directive, forwardRef } from '@angular/core';
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { HttpCl
浏览 2提问于2018-01-10得票数 1
回答已采纳
在angular中有一个叫做ngOnChanges的方法。我正在试着理解这一点，我试着用这段代码。但是我没有得到任何输出。
有谁能帮我理解吗？
下面是我的代码：
import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { StorageService } from '../shared/service/storage.service';
@Component({
selector: 'app-footer',
templateUrl: &#
浏览 0提问于2018-04-26得票数 0
2回答
我试图将文本添加到输入类型的电子邮件中，但没有成功，这就是我要做的。
$scope.lastFocused;
angular.element("input[type='text'], input[type='url'], input[type='email'], input[type='password'], input[type='search'], input[type='tel'], textarea").focus(function() {
$scope.la
浏览 3提问于2016-08-25得票数 0
回答已采纳
下面是我的日期范围组件HTML：
<mat-form-field appearance="fill" class="fields-full-width">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input
[rangePicker]="picker"
[dateFilter]="rangeFilter"
formGroupName="dateRange&
浏览 8提问于2021-09-25得票数 1
回答已采纳
app.module.ts import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import {
浏览 16提问于2019-01-27得票数 1
回答已采纳
我正在用Stencil.js创建一个无线网络组件。
Stencil.js代码：
<div>
<slot/>
<label>
{this.label} <span/>
</label>
</div>
我传递一个类型为radio的输入。在Angular中的用法：
<my-radio label="{{fruit}}">
<input name="fruits" type="radio" id="{{fr
浏览 20提问于2021-04-29得票数 0
1回答
最近，我正试图编写用于指令的测试用例。
例如，这是一个在浏览器中管理DOM的指令。
var demoApp = module('demoApp', ['']);
demoApp.directive('tabTo', function(){
var linkFunc = function(scope, element, attrs, controllers){
element.bind('keyup', function(e){
var maxLength = attrs['m
浏览 0提问于2014-09-02得票数 1
回答已采纳
我试图在我的Angular 5.x组件中调用ngOnChanges()函数，每当组件生命周期或模板中的变量this.test发生更改但它不起作用时，ngOnChanges()函数不会在任何时候调用。有人能帮帮我吗？
src/app.ts：
import {Component, NgModule, Input, OnChanges, SimpleChanges} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector:
浏览 3提问于2018-02-07得票数 3
回答已采纳
我是第一次学习Angular。我正在尝试将@input()装饰器与从接口派生/导入的对象类型一起使用。当@input()变量是字符串类型时，它可以工作。但是当@Input()是一个对象时，我就不能让它工作了。
课程卡component.ts：
import { Component, OnInit, Input } from '@angular/core';
import {Course} from '../model/course';
@Component({
selector: 'course-card',
templat
浏览 10提问于2019-07-12得票数 0
我刚接触Angular，只是一个关于输入元素上的数据绑定的问题。代码如下：
<input id="test" [paModel]="newProduct.name" (input)="newProduct.name=$event.target.value" />
和指令类：
@Directive({
selector: "input[paModel]"
})
export class PaModel {
...
@Input("paModel")
modelProperty: str
浏览 5提问于2019-11-01得票数 0
对于组件交互，我在angular6中有一些查询。对于组件交互，我们有@Input、@Output、viewChild和services等方法。但大多数情况下我们将使用服务。
在什么情况下，我们需要使用@Input、@Output和viewChild来传递应用程序中的值
@Input、@Output和viewChild方法有什么限制吗？
我们可以使用@Input，@Output方法传递大量数据或值数组吗？
我们可以在本地范围内使用“输入”和“输出”吗？请帮助我澄清我的疑虑
浏览 0提问于2019-07-19得票数 1
回答已采纳
2回答
我的app.component.ts
import { Component, Input, OnInit, OnChanges, SimpleChanges} from '@angular/core';
import {Counter } from './counter'
@Component({
selector: 'my-app',
template: `
<custom-counter [(counter)]="counterArray" (counterChange)="myValueChan
浏览 5提问于2017-01-02得票数 1
回答已采纳
我试图在一个角(v12)和离子(v6)项目中创建一个反应形式。当我提交表单时，而不是调用表单标记ngSubmit属性中指定的submit函数，页面就会出现刷新。该应用程序是基于离子标签，以防止可能导致问题？我已经将ReactiveFormsModule导入页面模块，而不是应用模块，因为我阅读过的各种教程建议您在使用Ionic时需要这样做。
profile.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
impor
浏览 6提问于2022-04-16得票数 0
我正在寻找Angular 2内联编辑的例子或指针。我在Angular 1中找到了一些非常好的例子，比如。但我正在努力为Angular 2寻找相似的例子。我基本上需要实现与这个例子类似的结果。当涉及到Angular 2 (1或2)时，我是一个完全的新手，所以任何帮助都是非常感谢的。
我已经包含了我的Html，我的想法是，当单击按钮时，userEditing标志被设置为true，但我只希望选定的行更改为输入元素，而不是(目前正在发生的) ngfor中的所有行
<tr *ngFor='let user of userList'>
<td
浏览 6提问于2017-02-13得票数 2
回答已采纳
我在Angular 7上设置表单，每次我输入正确的字段:姓名、电子邮件和电话时都会收到这个错误。然后我单击按钮createEmployee。通常它会转到下一页，但这一次它没有，它显示了这个错误。
这是html组件：
<div class="container custom-container">
<div class="col-md-12">
<h3 class="mb-3 text-center">Create Employee</h3>
<form [
浏览 2提问于2019-07-25得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
