除非轮询，否则ngOnChanges不会检测更改
ngOnChanges是Angular框架中的一个生命周期钩子函数，用于检测输入属性的变化。当组件的输入属性发生变化时，Angular会调用ngOnChanges函数，并传入一个SimpleChanges对象作为参数，该对象包含了变化的输入属性的当前值和之前值。
ngOnChanges函数通常用于在输入属性变化时执行一些逻辑操作，例如更新组件的视图或执行其他业务逻辑。它可以帮助我们在组件之间传递数据时进行响应式的处理。
在使用ngOnChanges时，需要注意以下几点：
- ngOnChanges函数只会在输入属性发生变化时被调用，如果输入属性没有发生变化，则不会触发该函数。
- ngOnChanges函数在组件初始化时也会被调用一次，此时输入属性的变化对象中的当前值和之前值相同。
- ngOnChanges函数的参数SimpleChanges是一个键值对，其中键是输入属性的名称，值是一个对象，包含了当前值和之前值。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供可扩展的计算能力，满足各种业务需求。产品介绍链接
- 云数据库 MySQL 版（CDB）：高性能、可扩展的关系型数据库服务。产品介绍链接
- 云原生容器服务（TKE）：基于Kubernetes的容器管理服务，简化容器化应用的部署和管理。产品介绍链接
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能开发工具和算法模型，帮助开发者快速构建和部署AI应用。产品介绍链接
- 物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，帮助用户快速构建和管理物联网设备。产品介绍链接
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
考虑一下这个
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'my-app-n1',
template: `
<my-app-n2 [from2]="from1"></my-app-n2>
<div>
{{from1.name}}
<input type="button" value="n1" (click)="changen1()
浏览 0提问于2017-10-19得票数 2
回答已采纳
我和ngOnChange有点问题。我有以下组件：
@Component({
selector:'user-table',
template: `...`,
})
export class UserTable implements OnChanges{
@Input() users: User[];
years:string[];
constructor(private _usersCollection:UsersCollection){
}
ngOnChanges(){
if (this.users.len
浏览 0提问于2016-03-14得票数 12
回答已采纳
2回答
给定以下组件：
@Component({
selector: 'compA',
template: template: `<compB [item]=item></compB>`
})
export class CompA {
item:any;
updateItem():void {
item[name] = "updated name";
}
}
@Component({
selector: 'compB',
template: templa
浏览 0提问于2017-07-06得票数 25
回答已采纳
我使用DoCheck检测来自ngFor的输入属性中的重要更改。正常工作。但是，当我做了一些更改(从数组中删除一个由ngFor迭代的项)时，我的子组件不会看到任何更改，也不会重新呈现自己。
也许我做错了什么？
ngDoCheck() {
console.log('zz');
var changes = this._differ.diff(this.schedulerData);
console.log(changes);
if(changes) {
changes.forEachAddedItem(r => {
浏览 3提问于2016-07-08得票数 0
回答已采纳
我做了一个在angular中运行默认的变化检测测试。
测试表明，即使没有执行onChange ()方法，DOM也会使用新值(通过单击进行更改)进行更新。我们知道它只在CD检测到变化时运行。
这是测试:如果你点击“更改名称1”按钮，CD不会检测到更改(原因我现在不会解释)，但DOM无论如何都会更新为父组件和子组件中的新值。
所以我想知道，当没有检测到变化时，谁负责呈现DOM，而不是CD？为什么即使CD未检测到更改，DOM也会更新？
父组件：
@Component({
selector: 'app-root',
template: `
<h1&
浏览 52提问于2020-07-20得票数 0
我想要动态加载表单，但当我单击按钮加载第二个表单时，我得到一个错误。
据我所知，@Viewchild在我的子组件中设置了field属性，但在单击按钮加载第二个表单时不会更新该属性。
请参见app-component中的loadForm方法。
错误错误:找不到名称为'userName‘的控件
我在stackbliz语言中有一个有效的例子。
查看控制台日志以查看错误消息
任何人都知道为什么我的demoform组件中没有加载第二个表单。
谢谢
约翰
浏览 0提问于2018-10-12得票数 0
如何让ngOnChanges()在其中一个数据绑定对象上的属性发生更改时触发，而不必将该属性设置为新对象。
// component
@Input() myObj: ObjType;
// component code...
这不会触发更改
// outside component
dataBoundObj.width = 1000;
这样就可以了
dataBoundObj = new ObjType();
浏览 4提问于2017-07-01得票数 4
回答已采纳
我已经创建了一个用于测试的组件，用于检查ngOnChanges()触发与否。我了解到ngOnChanges()是在执行Constructor()之后触发的启动事件，但在我的应用程序中它无法工作。 我的TS代码 constructor() {
console.log("constructor");
}
ngOnChanges(){ console.log("ngOnChanges"); }
ngOnInit(){
console.log("ngOnInit");
}
ngOnDestroy(){
c
浏览 32提问于2021-06-18得票数 0
回答已采纳
2回答
我使用fetch向app.component中的reqres api用户发出请求，然后通过输入将数据共享给他的子组件(hello.component)。我在子模板中获得了正确的用户名，我试图在控制台中打印用户，但得到了一个空数组。有没有办法“等待”另一个组件的响应？我猜这是一个异步问题。这是链接：https://stackblitz.com/edit/angular-ivy-b3m1kp?file=src%2Fapp%2Fhello.component.ts 提前谢谢。 app.component： import { Component, VERSION, OnInit } from &
浏览 9提问于2020-09-10得票数 0
回答已采纳
我是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
在经历了一些浏览器中的惰性之后，我试图优化我的Angularfire应用程序中的变化检测。我读过，并试图对列表代码进行类似的建模。
我的集装箱班：
<section *ngIf="inclusions$ | async as standardList">
<bl-list-item *ngFor="let standard of standardList;
trackBy: identify" [inclusion]="standard">
</bl-list-item>
浏览 0提问于2018-07-17得票数 3
到目前为止，在我的角度旅行，我还没有太多的需要管道。
到目前为止，一个常见的主题是，大多数组件都有一些数据的@Input，在被模板使用之前可能需要对这些数据进行操作。
这就留下了一个相当肮脏的局面：
// data coming in
@Input data: MyDataInterface;
// data after massage, it is this which powers the template
config: MyDataInterfaceAfterMassage;
// the masseuse works in here and creates a new "
浏览 1提问于2018-02-12得票数 1
回答已采纳
2回答
我在视图中使用异步管道，在视图中动态加载数据。但是，它没有加载任何数据。
我需要更改可观察对象的值，在页面中更改几次，比如重新加载页面，加载更多的值，并根据新闻的类别更改新闻内容。
我使用了ChangeDetectorRef，detectChanges()，但是没有成功。
ngOnInit() {
if (this.isFirstRun) {
this.items$ = this.apiService.getNewsByCategory(
this.categoryId = (this.categoryId === 0 ? 1 : this.
浏览 0提问于2019-08-22得票数 0
2回答
你可以在这里看到我的。在这个非常简单的例子中，我传递一个函数
_ => {
console.log(number);
}
到具有@Input属性的子组件。我的父组件看起来是这样的：
@Component({
selector: 'my-app',
template: `
<child [func]="getFunction(3)">
</child>
<button type="butto
浏览 3提问于2017-01-23得票数 1
回答已采纳
我已经在树莓中安装了恩智浦NFC-ExploreNFC，当我运行示例card_polling程序时，它可以检测到我的JISX6319-4兼容卡，但它无法检测到我的Samsung Note II (近场通信已启用)。
在Raspberry中是否需要额外的设置？
问候
浏览 2提问于2014-05-05得票数 0
在角2+中，ngDoCheck和ngDoCheck似乎具有相同的功能。据说，只要触发更改检测，就会调用ngDoCheck。现在，此更改检测将通过视图中的更改触发。根据文档，每当视图更改时都会调用ngAfterViewChecked。
当两个生命周期挂钩足够时，这里需要的是什么？
浏览 7提问于2018-06-05得票数 5
5回答
我正在尝试创建一个角组件，它使用提供的对象数组来呈现html表。
我已经实现了OnChanges来检测对@Input的更改，但它似乎不起作用。
对于测试，我使用setInterval来添加一些数据，但是它没有反映在子组件中。
这是我到目前为止的密码，
ng-table.component.ts:
export class NgTableComponent implements OnInit, OnChanges {
@Input() data: any[];
private columns: string[];
private rows: string[][];
浏览 3提问于2017-10-19得票数 4
回答已采纳
3回答
我正在尝试理解回调ngOnChanges()，所以我创建了下面发布的示例。但是在编译时，尽管接口Post的属性标题和内容分别有值，但是我没有收到来自ngOnChanges的任何日志
请让我知道如何正确使用
app.component.ts
import { Component, OnInit, OnChanges, SimpleChanges,Output, EventEmitter } from '@angular/core';
export interface Post {
title:string;
content:string;
}
@Component({
浏览 6提问于2021-04-05得票数 0
我有多个复选框。我想要的是当用户检查它们中的一些来调用方法并在该方法中执行某些操作时。有什么建议我该怎么做呢？
我试过这个：
<input type="checkbox" [ngModel]="checked == 1 ? true : checked == 0 ? false : null" (ngModelChange)="checked = $event ? 1 : 0">
ngOnChanges(){
console.log(this.checked);
}
但当我选中或取消选中时，onChan
浏览 4提问于2017-07-20得票数 1
考虑一下这个
注意:要观察输入链接后必须重新运行应用程序的效果
import {Component, OnInit, Input, OnChanges, DoCheck} from 'angular2/core'
@Component({
selector: 'sub',
template: `
<li *ngFor="#elem of sub_list">
<div>{{elem['name']}}</div>
</li>
`
})
浏览 3提问于2016-04-16得票数 4
回答已采纳
5回答
我想知道视图中是否修改了对象myObject，为此，我正在使用ngOnChanges。
这是我的html
<form class="inputForm">
<table id="inputFormTable">
<tr>
<td><label>login</label></td>
<td><input type="text" size="40" [(ngModel)]=
浏览 12提问于2017-04-14得票数 0
回答已采纳
2回答
指令中定义的投入：
@Input items: any[];
构成部分中定义的数据：
data: string[] = ['Item 1', Item 2', 'Item 3'];
组件模板中使用的指令：
<input type="text" myDirective [items]="data">
当组件中的items data 数组发生变化时，如何在指令中更新的值？
例如，如果组件中的data更新为：
data: string[] = ['Item 1', Item 2', '
浏览 2提问于2018-06-05得票数 1
回答已采纳
我正在创建一个accordion元素，在这个accordion元素中，我可以添加新的列表，这些列表也是accordion元素。一旦创建了这个新列表，我需要扩展新创建的列表。我遇到了一个变化检测问题，而且我是新接触Angular的，所以如果这是显而易见的，请原谅我。现在，如果我创建一个新的列表，我们称它为“列表1”，它不会展开。但是如果我创建了“列表2"，”列表1“就会展开。我正在尝试用ChangeDetectorRef呼叫detectChanges，但没有成功。我也尝试过markForCheck()，但没有成功。我已经确认了新创建的列表是绑定的，并且如预期的那样返回；它只是没有在我想要
浏览 0提问于2020-04-15得票数 0
3回答
我正在使用动态组件，我遵循这个并很好地工作。
这是我的实现
dynamic-component.directive.ts
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[DynamicComponent]'
})
export class DynamicComponentDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
这
浏览 4提问于2021-04-26得票数 2
1回答
我试图了解在角2应用中的变化探测器机制。我想我在阅读几篇文章时取得了一些进展:)，但不是很多。据我所知，情况是这样的：
当组件不使用OnPush策略时，它将在以下情况下运行相关的更改检测器：
1)应用程序的任何部分启动DOM事件2)应用程序的任何部分解析HTTP请求3)任何部分使用setTimeout或setInterval执行异步代码
所有组件将在组件树中自上而下检查。
当组件使用OnPush策略时，它将在以下情况下运行更改检测器：
( 1)它的任何@输入更改其引用(此处涉及的不可变性) 2)组件(或子组件)启动事件3)可观察的启动事件。在这种情况下，如果我们使用可观察的@Input，那么我
浏览 3提问于2017-01-31得票数 3
回答已采纳
我的angular应用程序遇到了一个问题，我使用input作为数组，并在click事件发生时将一个值推送到数组。但是当数组推送完成时，ngOnChanges不会触发。有没有办法解雇ngOnChange？
我的代码是ts文件是
@Component({
selector: 'adv-search',
templateUrl: './app/modules/result.html'
})
export class InputComponent {
@Input() metas:any=[];
ngOnChanges() {
console
浏览 4提问于2017-04-05得票数 36
回答已采纳
我有一个具有输入变量的子组件，名为'name‘。它通过父组件进行数据绑定，具有一定的初始值。现在，当我从子组件本身中更改'name‘的值时，角不知道。我怎么让角知道这个变化？
从我在网上读到的内容来看，我尝试过使用ChangeDetectorRef.detectChanges()或ChangeDetectorRef.markForCheck()，但它似乎不起作用。我想我漏掉了什么。
这里是针对这个问题的stackblitz 。如果您在子组件中更改名称，然后再次尝试从父组件更改名称，它不会更改，因为角仍然认为它绑定到父组件先前提供的值。但我把它从里面变了。我该怎么解决这个问题？
浏览 1提问于2019-05-25得票数 2
export class AppComponent implements OnInit, OnChanges {
@Input()
value: number;
constructor(
private cdr: ChangeDetectorRef
) {}
ngOnInit() {
of(1).subscribe(v => {
this.value = v;
console.log(1);
this.cdr.detectChanges();
of(2).subscribe(()
浏览 8提问于2020-07-29得票数 1
回答已采纳
例如，我有两个输入属性：
@Input() field1;
@Input() field2;
每次初始化field1时，我都希望调用function1()；每次初始化field2时，都希望调用function2()。我想这与OnInit类似，但不完全一样。有什么办法解决这个问题吗？
谢谢!
浏览 5提问于2016-03-25得票数 2
回答已采纳
我有一个子组件--一个不触发*ngIf条件的组件
儿童部分：
export class child {
@Input() user;
@Input() list;
listLength: number;
showBtn: boolean = false;
constructor(){}
ngOnChanges(changes: SimpleChanges){
this.userId = this.user.id;
this.userList = this.list;
this.listLength = this.use
浏览 5提问于2017-05-16得票数 3
回答已采纳
1回答
在ngFor中，我在向子数据传递数据时遇到了麻烦，输入了一个PrimeNg TabPanel。父母是这样的：
<p-tabPanel header="{{tab.title}}" *ngFor="let tab of tabs; let i = index" [closable]="true" [selected]="active[i+1]">
<app-edit-tab [profile]="profiles[i]" (profileModifiedEvent)="profileM
浏览 4提问于2022-02-24得票数 0
我在詹金斯创造了一份免费的工作。我配置了Poll SCM，并定期为该工作构建。
如果Poll SCM和Build都周期性地触发了同时构建，那么哪个构建首先运行？
浏览 0提问于2017-06-18得票数 2
我正在学习角，我从角文档中遇到了这个示例：
on-changes-parent.component.html
<h2>{{title}}</h2>
<label for="power-input">Power: </label>
<input type="text" id="power-input" [(ngModel)]="power">
<label for="hero-name"> Hero.name: </label>
&l
浏览 27提问于2022-02-20得票数 -1
回答已采纳
3回答
你好，我是新来的角2。
我可以使formGroup在添加在ng-选择，控制和预定义增值.
那太完美了。但是当单击按钮时，新的值按在ng-选择中，但是ng-选择，而不是更新。
这里我的柱塞
//our root app component
import {Component, OnInit, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, React
浏览 4提问于2017-06-30得票数 2
回答已采纳
我正在尝试构建一个与FormGroup & FormArray兼容的数据表。我将通过parentForm组将标题详细信息和行传递给此组件。
我已经创建了一个小的添加按钮，点击它，我将动态添加新项目。在本例中，UI正在更新，但是如果我打印formGroup.value()，则只获得传递的初始值。而不是更新的formControl。我不知道我错过了什么。
export class FormTableComponent implements OnChanges {
@Input() headers: Array<string>;
@Input() rows: Ar
浏览 0提问于2018-02-16得票数 5
回答已采纳
我正在使用Angular2的最终版本。
fixture.detectChanges()调用哪些生命周期事件以及按什么顺序调用？
这上面的文件在哪里？
浏览 6提问于2016-10-27得票数 3
回答已采纳
我有一个父组件，并将主窗体状态作为输入传递给子组件。有没有办法在子组件中保持表单状态更新？ 父HTML： <app-child [status]="myFormStatus"></app-child> 在我的子控件中，我使用了status，但是当父控件中的myFormStatus值发生更改时，我如何通知该子控件？有没有办法调用父方法来获得最新的值？
浏览 31提问于2021-04-30得票数 0
回答已采纳
我已经将我的angular1项目转换为angular4，但ngOnChanges方法似乎不起作用，我想观察一些值发生变化时的情况
import {Component, OnInit, Input, OnChanges, SimpleChanges} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'login-page',
templateUrl: './login.page.html'
})
export class LoginPag
浏览 26提问于2017-07-06得票数 0
回答已采纳
1回答
我有一个正在从另一个组件中更新的数组(更新正在发生，String被添加到数组中，我已经用测试按钮检查了它)，但是ngOnChanges不会检测到任何更改。我的密码怎么了？
我应用的更改是array.push()。
import { Component, OnInit, Input, OnChanges } from '@angular/core';
import {MatAccordion} from '@angular/material/expansion';
@Component({
selector: 'app-cart',
te
浏览 1提问于2020-12-22得票数 1
回答已采纳
我需要更改来自父级的“单击事件”上“我的孩子”的@Input值中的数据。我就是这样做的：
亲本
update(user: SampleData): void {
this.sampleToUpdate = user;
}
<td style="text-align: center;">
<button class="btn btn-icon btn-outline-info btn-sm" (click)="update(item)">
浏览 0提问于2020-09-11得票数 0
回答已采纳
如果你想知道我为什么需要这个
我有一个显示电话联系人的组件。它得到了它应该显示他的联系人的账户。
为了在这个组件中实现搜索，我应该(如果我错了就让我来做)，创建一个包含所有联系人并过滤他的第二个数组。为此，我需要知道什么时候会有一个新帐户出现在组件中，并在每次更新时更改搜索的新数组。
如果有更聪明的方法来实现搜索和过滤，我想知道。但是无论如何，我想知道如何知道什么时候有新的输入。
我想要这样的东西：
export class ContactTable
{
@Input(newAccountCame) account:Account;
private newAccountCame()
浏览 3提问于2016-07-29得票数 0
回答已采纳
我有非常简单的组件，渲染子组件与道具。我尝试复制问题 (检查控制台，它控制台两次，而预期是一次)
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = '
浏览 0提问于2019-07-24得票数 1
尝试进行双向绑定，但在检查到异常后更改了表达式。当模式更改为cancel，并且我想将值重置为empty时，我会得到异常。我假设这是因为我正在使用不同的值在更改周期内发出，但不知道如何避免？
<edit-field [mode]="mode" [(field)]="field"></edit-field>
我的组件是：
export class EditFieldComponent implements OnChanges {
@Input('mode') mode: string;
@Input(
浏览 1提问于2017-04-03得票数 0
我的代码中有Array @输入，当我推送父组件时，我需要在子组件中获得Array值。我只使用ngOnChange就成功地做到了。但是我需要在另一个函数的数组中使用这个值，但是当我调用@Input时，值变为空。我是如何得到ngOnChange的值的？
@投入儿童部分：
@Input() namePackage: Array<string> = []
@Input() estaticValue: Array<string> = []
@Input() valueBag: Array<string> = []
@Input() linkImage: Array&l
浏览 12提问于2022-10-18得票数 0
--我不太明白为什么我需要向下面的代码中添加markForCheck()以使更改可见。为什么我的@ not ()不触发更改检测？
我正在将我的项目重构到OnPush。这两个组件都启用了OnPush。据我所知，当启用该功能并更改输入(如messages)时，就会触发更改检测。
在下面的代码中，我通过graphqlService打了一个电话。当我收到调用时，我会对传入的数据进行一些解析，然后将其设置为informationMessages属性，该属性通过其messages属性绑定到子组件cv-messages。
结果是，在初始化ngOnChanges属性时，只调用informationMessag
浏览 1提问于2019-12-09得票数 4
回答已采纳
我有一个父组件(CategoryComponent)，，一个子组件(videoListComponent)和一个ApiService。
我已经很好地完成了大部分工作，即每个组件都可以访问json api，并通过可观察对象获取相关数据。
目前视频列表组件只获取所有视频，我想将其过滤为特定类别的视频，我通过@Input()将categoryId传递给孩子来实现这一点。
CategoryComponent.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list
浏览 149提问于2016-07-25得票数 679
回答已采纳
我创建了一个简单的例子来演示我面临的一个奇怪的问题。
Stackblitz -
我有三个组成部分，下面是：
1- app组件
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
template: `<hello [form]="form"
浏览 0提问于2018-12-05得票数 16
回答已采纳
2回答
我得到了一个角分量，它在检测到变化时会做一些相当重的计算。
@Component (
selector: 'my-table',
... 400+ lines of angular template ...
)
class MyTable implements OnDestroy, AfterContentInit, OnChanges {
...
@override
ngOnChanges(Map<String, SimpleChange> changes) {
log.info("ngOnChang
浏览 3提问于2017-07-22得票数 2
回答已采纳
我使用一个角2 @Input属性向子组件传递所需的数值，如下所示。
父组件：
@Component({
selector: 'test-parent',
template: '<button (click)="raiseCounter()">Click me!</button><test-child [value]="counter"></test-child>'
})
export class ParentComponent {
public counter: number
浏览 3提问于2017-02-14得票数 3
回答已采纳
1回答
这是我的代码：
@Component({
selector: 'app-team-seaon-kit',
templateUrl: './team-seaon-kit.component.html',
styleUrls: ['./team-seaon-kit.component.css']
})
export class TeamSeaonKitComponent implements OnInit {
@Input() colorKit;
@Input() seasonKitOptions;
ngOnChang
浏览 5提问于2019-07-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
