<http://stackoverflow.com/questions/38521915/how-using-changedetection-changedetectionstrategy-onpush-in-angular2#>
I have simple angular2 application. The application has only one component
with ChangeDetectionStrategy.OnPush. The problem is the component never
refresh its view. How to make the component refresh itself after data array
updated? Here the code. I'm using Angular 2.0.0-rc.4.
index.html
<head><title>Angular 2 QuickStart</title><meta charset="UTF-8"><meta
name="viewport" content="width=device-width, initial-scale=1"><link
rel="stylesheet" href="styles.css">
<script src="node_modules/core-js/client/shim.min.js"></script><script
src="node_modules/zone.js/dist/zone.js"></script><script
src="node_modules/reflect-metadata/Reflect.js"></script><script
src="node_modules/systemjs/dist/system.src.js"></script><!-- 2. Configure
SystemJS --><script src="systemjs.config.js"></script><script>
System.import('app').catch(function(err){ console.error(err);
});</script></head><body><app
style="width:100%;height:100%;">Loading...</app></body>
main.ts
import { bootstrap } from "@angular/platform-browser-dynamic";import {
AppComponent } from "./app";
bootstrap(AppComponent);
app.ts
import {Component, ComponentRef, ComponentFactory, ViewContainerRef} from
"@angular/core";import {ListComponent} from "./list";
@Component({
selector: "app",
template: `
<div>
<h1>Angular2 - app</h1>
<gm-list></gm-list>
</div>
`,
directives: [ListComponent]})export class AppComponent {}
list.ts
import {Component, Input, NgZone, ChangeDetectionStrategy, ChangeDetectorRef}
from "@angular/core";
@Component({
selector: "gm-list",
template: `<div style='width:100%;height:100%;'>
List
<div *ngFor="let item of data" >
<div>
<label class="checkbox">
<input type="checkbox" [(ngModel)]="item.visible"> {{ item.name
}}
</label>
</div>
</div>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush})export class ListComponent
{
private _data: any = [];
constructor(private zone: NgZone, private changeDetectorRef:
ChangeDetectorRef) {
}
ngOnInit(): void {
var me = this;
setTimeout(function () {
me.data = [
{ id: 1, name: "one", visible: true },
{ id: 2, name: "two", visible: false },
{ id: 3, name: "three", visible: true },
{ id: 4, name: "four", visible: false },
{ id: 5, name: "five", visible: true },
{ id: 6, name: "six", visible: true }
];
}, 3000);
}
@Input() set data(data: any) {
this._data = data;
console.log("databind");
}}
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
