angular-changedetection

问题 I'm trying to build a small dev component that displays only in non-production builds. One of the things that I see useful to keep track of is the number of change detection cycles that I'm triggering as I'm adding various functionality to make sure I'm not doing something that's really unperformant. like having mouseover and mouseout events on the menu icon to change its color. Sadly I can't seem to get it to actually display on the view and not just in the console. Stackblitz here. You'll

问题 I'm using Angular 8 . I have a child component with one @Input() property. This input has to be modified before binding and thus using method to return the data for binding like <app-child [info]="getInfo()"></app-child> And in the parent component, the getInfo() returns value like getInfo(): any|null { console.log('called...'); if (this.data) { return JSON.parse(this.data); } return null; } But this way, the method is called again and again whenever some event occurs in the child component.

问题 I'm using Angular 8 . I have a child component with one @Input() property. This input has to be modified before binding and thus using method to return the data for binding like <app-child [info]="getInfo()"></app-child> And in the parent component, the getInfo() returns value like getInfo(): any|null { console.log('called...'); if (this.data) { return JSON.parse(this.data); } return null; } But this way, the method is called again and again whenever some event occurs in the child component.

问题 How to update barchart from angular2? I am trying to add new entry on click to [datasets]="barChartData" In template, graph looks like this: <canvas baseChart #myChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> I tried following recommended methods: 1) Changed dataset variable directly - cloned the data , changed it and

问题 I have created a simple example to demonstrate a weird issue I'm facing. Stackblitz - https://stackblitz.com/edit/angular-change-detection-form-group I have three components and here are they: 1 - app component import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'my-app', template: `<hello [form]="form"></hello> <hr /> <button (click)="changeFormValue()">Change Form Value</button>`,

问题 From these two posts: The mechanics of DOM updates in Angular Angular 2 Performance: Is it better to bind with a data member than a function? I understand how the DOM updated when the 'Change Detection' has occurred. The thing I do not understand from "Everything you need to know about change detection in Angular" is how Angular keeps track of what properties have beed used inside the function and therefore when it should run the 'Change Detection'. Let's assume this is the parent Component

问题 I know there are several threads on this issue, but the proposed fixes are not working for me. The data appears correctly then soon dissappears. From what I understand, a round of change detection needs to be activated. I have used: ngAfterViewInit() { this.cdr.detectChanges(); } but the error persists. If I add this.cdr.detectchanges() call to the increment() method, it produces an loop and the maximum call stack is exceeded. component.html: <div *ngFor="let item of messageSplit[increment()]

问题 I had a question where the (great) answer exemplified how to allow an input box to obtain focus (by requesting change detection to be run in case the component isn't visible at the moment of focus assignment). Now, I'm faced with a similar problem. I'm setting the value in a field of the component that contains the input box from another component. It works as far I can see the input box being displayed and the read-only label getting hidden. However, the input box isn't focused on. I'm

问题 Angular 6.0.1 ngRx 6.0.1 I have an interpolated value set up in my View: {{firstName}} It is not updating when the value of the field it is bound to changes. The value is changing though - if I log it out to the console inside the subscription, I see the updated value. It just doesn't update in the UI. Here's the relevant code: Subscription from my component: private subscribeToCurrentPerson(): void { this.tState$ = this.store .pipe(select(selectors.getCurrentPerson), takeWhile(() => this

问题 Angular 6.0.1. This problem is manifesting itself inside a large application, but I created a simple component to try and see what is going on. The simple component has a simple template: {{myProp}} In the ngOnInit, I set this.myProp = 'hello'; and I see the word hello on screen as I would expect. So far so good. However, if I now try to update the value of myProp in a setTimeout , it never updates the UI: this.myProp = 'hello'; setTimeout(() => { this.myProp = 'goodbye'; }, 3000); The value