angular2-changedetection

问题 I have an array of objects (let's call it arr ). In one of my component's inputs in the (change) method I modify one of these object's attribute, but in the view ( *ngFor ) nothing changes. I read that Angular2 change detection doesn't check the contents of arrays or object, so I tried these: this.arr = this.arr.slice(); and this.arr = [...this.arr]; But the view doesn't change, it still shows the old attribute. In the (change) method with console.log() I got the correct array. Weird, but

问题 This is driving me nuts: make sure you check the console in the stackblitz Here is a STACKBLITZ that describes my problem best. In a nutshell. I want "Stuff" inside of a CLOSED Expansion-Panel NOT to be checked by ChangeDetection (exlude from ChangeDetection). cd-check-comp: Projected from Parent to Child is STAMPED OUT from Parent -View so it is checked when ever parent is checked. That is the expected behaviour, but NOT DESIRED . Question: How can I put the projected ng-template (in this

问题 I have a class (interface) in my angular 4 app which has a lot of fields. Note that the instance of this class/interface is immutable (i.e. the members will NEVER be changed). E.g. public interface IHaveALotOfFields { field1: string; //... field500: string; } This interface is provided via a (singleton / application level provided) service which exposes the class as a member. E.g. @Injectable() public class MyService { public translations: ITranslationsProvider; } The service is injected into

问题 I have a angular 4 application. The app.component.html looks like this <!--The content below is only a placeholder and can be replaced.--> <loading-bar color="#FF0000" [height]="3" [animationTime]="0.3" [runInterval]="100" [progress]="0"></loading-bar> <div class="app app-header-fixed" value="test"> <app-header *ngIf="header" name="app_header"></app-header> <app-left-menu *ngIf="leftmenu" name="app_leftMenu"></app-left-menu> <div id="content" class="app-content abc_plain_wraper" role="main">

问题 This may be my own misunderstanding of how Angular 2 change detection works but I would have expected that if a component's ChangeDetectionStrategy was set to Checked , CheckOnce or Detached , that that component would only check for changes once when the component is instantiated. It appears to not happen that way. import {Component, OnInit, ChangeDetectionStrategy} from 'angular2/core' @Component({ selector: 'my-app', providers: [], template: ` <div> <button (click)="onClick($event)" [class

问题 I've been working on a simple auto-scroll directive for chat-display: @Directive({ selector: "[autoScroll]" }) export class AutoScroll { @Input() inScrollHeight; @Input() inClientHeight; @HostBinding("scrollTop") outScrollTop; ngOnChanges(changes: {[propName: string]: SimpleChange}) { if (changes["inScrollHeight"] || changes["inClientHeight"]) { this.scroll(); } }; scroll() { this.outScrollTop = this.inScrollHeight - this.inClientHeight; }; } This directive will work when I've set

问题 I have an issue in Angular2 (final) around change detection and data flow between components. I have worked around it but it seems a little hacky to me so was wondering if there is a better way of doing it. Basically I have a component A that has a child component B and also *ngFor that creates number of children components C. For every component C, there is an @ Output defined that is handled in the parent component A for each instance of C. Based on that output, another property on

问题 I'm trying to build a small audio player but can't seem to get nice change detection, for example for the audio track current time. For example, I have the track playing fine in my component and in my template file I have {{ player.currentTime }} But the time only seems to be updated when I perform other events such as clicking around or play/pause button for example. It doesn't intuitively update live as the track is playing. Seems like issue with change detection or something? For working

问题 I have a simple test code for adding dynamic components with Angular 4. @Component({ selector: 'component', template: ` <ul><li #item *ngFor="let number of list">{{number}}</li></ul> <ng-template #anchor> </ng-template> <ng-template #template> <li><input type="text" [(ngModel)]="myInput"/></li> </ng-template>` }) class _Component { @ViewChild('template') template: TemplateRef<any> @ViewChild('anchor', { read: ViewContainerRef }) anchor: TemplateRef<any> @ViewChildren('item', { read:

问题 I'm trying to load the script https://apis.google.com/js/api.js?onload=initGapi from within an Angular 2 service in order to make calls to the Google API, but whenever I try to return a value when the script is done loading and initializing, the async pipe doesn't want to render the value to the template. I'm using an EventEmitter that fires when the gapi.load() and gapi.client.init is complete, and the observable is subscribed to it in a component. The async pipe doesn't seem to want to read