angular2-changedetection

How do I detect changes that occur to one element of an Angular 2 reactive/dynamic form?

阅读更多关于 How do I detect changes that occur to one element of an Angular 2 reactive/dynamic form?

问题 I am trying to detect the change in one specific form element that was built using reactive forms. I used *ngFor and *ngSwitch directives to build a reactive form as demonstrated in https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#. My form currently contains input type text and file . I use the change event to capture the file upload task so I need to detect changes in the file input element but not the text input element. This is where I run into the problem. The form built

Angular ngDoCheck() gets called even with ChangeDetectionStrategy.OnPush

阅读更多关于 Angular ngDoCheck() gets called even with ChangeDetectionStrategy.OnPush

问题 Lets say i have a component structure like this: AppComponent HeaderComponent ContentComponent TodosComponent TodoComponent If I set HeaderComponent's changeDetection to ChangeDetectionStrategy.OnPush and change something in TodoComponent, still HeaderComponent's ngDoCheck() , ngAfterViewChecked() and ngAfterContentChecked() gets triggered. What am I missing? Does ngDoCheck gets triggered anyway? If yes, how to determine if a component was checked by ChangeDetection? 回答1: Yes, that's the

Angular - Is binding a component method to DOM target property a wrong practice?

阅读更多关于 Angular - Is binding a component method to DOM target property a wrong practice?

Say, I have a component which is used as following: <health-renderer [health]="getHealth()" [label]="label"> <health-renderer> After reading data-binding related parts from https://angular.io/guide/template-syntax , it seem like the way I am setting target component property health is wrong as the template expression used is getHealth() which is a method. And method binding should only be done with events, not properties. In other words, template expression (the thing on right-hand side of = ) need to be a template variable, template reference variable or a component/directive/element property

Angular 2 Modal Popup Error “Expression has changed after it was checked”

阅读更多关于 Angular 2 Modal Popup Error “Expression has changed after it was checked”

Youtube video demonstrating the problem Github repository for the demo app I have a very simple app with an app component, a child component (account), alert service that handles a message dialog component (popup modal). For demonstrating purpose, I have two identical forms, one inside app.component.ts and one inside account.component.ts. Each of them has a button that calls the alert service to show the message dialog modal. The problem is that when I click in the input field of the form for the child component (account.component.ts) and "press enter on my keyboard", I get this error

Angular 2 Chrome DOM rendering problems

阅读更多关于 Angular 2 Chrome DOM rendering problems

问题 Our team (not only my computer) has a wierd rendering issue for Angular 2, that only happens in Chrome. Namely, when navigating the app or refreshing in mid app, many of the items in DOM are invisible. EG. paragraphs and headers that have text in them, but the text is not rendered for the end user, but the text is seen in the inspector DOM. The DOM will regain visibility if you edit a random CSS attribute in the inspector. This CSS doesnt even have to be applicable to the invisible DOM item

Angular ngDoCheck() gets called even with ChangeDetectionStrategy.OnPush

阅读更多关于 Angular ngDoCheck() gets called even with ChangeDetectionStrategy.OnPush

Lets say i have a component structure like this: AppComponent HeaderComponent ContentComponent TodosComponent TodoComponent If I set HeaderComponent's changeDetection to ChangeDetectionStrategy.OnPush and change something in TodoComponent, still HeaderComponent's ngDoCheck() , ngAfterViewChecked() and ngAfterContentChecked() gets triggered. What am I missing? Does ngDoCheck gets triggered anyway? If yes, how to determine if a component was checked by ChangeDetection? Yes, that's the correct behavior. The article If you think ngDoCheck means your component is being checked — read this article

ngIf - Expression has changed after it was checked

阅读更多关于 ngIf - Expression has changed after it was checked

问题 I have a simple scenario, but just can't get it working! In my view I display some text in a box with limited height. The text is being fetched from the server, so the view updates when the text comes in. Now I have an 'expand' button that has a ngIf that should show the button if the text in the box is overflowing. The problem is that because the text changes when it is fetched, the 'expand' button's condition turns to true after Angular's change detection has finished... So I get this error

Changes done in one component view doesn't reflect in another component view in angular 4

阅读更多关于 Changes done in one component view doesn't reflect in another component view in angular 4

问题 Here I am changing some data in one component ex: change user profile picture of one module and the same profile picture should be reflected in another component of some other module. These are not parent/child components. Hence I am importing the module and particular component. calling a function of the component which assigns the scope value of the profile picture. That function is triggered and changed url is appearing in console, If I print that in console. But not reflecting in View. I

How to detect change from one component into other

阅读更多关于 How to detect change from one component into other

Angular 4. Github source I have a menu which is filled by a web service. The web service is in taskService, but is not necessary now. ngOnInit() { this.getTasks(); } getTasks(): void { this.taskService.getTasks() .subscribe(Tasks => this.tasks = Tasks); } When you click on a task it loads a page, a different component, with a form ready to update the data. It is also made by a web service and works fine. The problem is that after update the task, it is not reflected in the task menu I am importing this: import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; and adding this to

Changes done in one component view doesn't reflect in another component view in angular 4

阅读更多关于 Changes done in one component view doesn't reflect in another component view in angular 4

Here I am changing some data in one component ex: change user profile picture of one module and the same profile picture should be reflected in another component of some other module. These are not parent/child components. Hence I am importing the module and particular component. calling a function of the component which assigns the scope value of the profile picture. That function is triggered and changed url is appearing in console, If I print that in console. But not reflecting in View. I tried with ChangeDetectorRef and this.ref.detectChanges(); But it is giving error as core.es5.js:1020