[英]ng-select not updating in Angular 2
hello i am new in angular 2你好,我是 angular 2 的新手
i can make formGroup in add in ng-select controll and predefine value added.我可以在 ng-select 控件中添加 formGroup 并预定义添加值。
that is perfectly.那是完美的。 but when button click then new value push in ng-select but ng-select not updating .但是当按钮单击然后新值推送 ng-select 但 ng-select not updates 。
here my plunker这是我的笨蛋
https://plnkr.co/edit/Hwfk1T2stkiRcLTxuFmz https://plnkr.co/edit/Hwfk1T2stkiRcLTxuFmz
//our root app component
import {Component, OnInit, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {SelectModule} from 'ng-select';
@Component({
selector: 'my-app',
template: `
<h1>ng-select demo app</h1>
<form style="padding:18px;max-width:800px;"
[formGroup]="form">
<div style="margin:5px 0;font-weight:600;">Single select example</div>
<ng-select
[options]="options0"
[multiple]="false"
placeholder="Select one"
formControlName="selectSingle"
>
</ng-select>
<button (click)="pushValue()">Click</button>
<div>Events:</div>
<pre #preSingle>{{logSingleString}}</pre>
</form>`
})
export class App implements OnInit {
form: FormGroup;
multiple0: boolean = false;
options0: any[] = [];
selection: Array<string>;
@ViewChild('preSingle') preSingle;
logSingleString: string = '';
constructor() {
this.options0.push({"label":'test',"value":'Test'});
console.log("Object:::"+JSON.stringify(this.options0));
}
ngOnInit() {
this.form = new FormGroup({});
this.form.addControl('selectSingle', new FormControl(''));
console.log("Object:::"+JSON.stringify(this.options0));
}
pushValue()
{
console.log("pushValue call.");
this.options0.push({"label":"test","value":"Test"});
console.log("Object:::"+JSON.stringify(this.options0));
}
}
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
SelectModule
],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
where is wrong ???哪里错了???
您可以使用Array.slice()
更新到数组实例,以便让 angular 检测到数组的变化。
this.options0 = this.options0.slice();
Looking at ng-select
source code i noticed查看ng-select
源代码,我注意到
ngOnChanges(changes: any) {
if (changes.hasOwnProperty('options')) {
this.updateOptionsList(changes['options'].isFirstChange());
}
so in order to update options list you should fire ngOnChanges
.所以为了更新选项列表,你应该触发ngOnChanges
。 It can be done by creating new reference to options0
可以通过创建对options0
新引用来options0
this.options0 = this.options0.concat({"label":"test","value":"Test"});
or或
this.options0 = [...this.options0, {"label":"test","value":"Test"}];
Change Detection变化检测
Ng-select component implements OnPush
change detection which means the dirty checking checks for immutable data types. Ng-select 组件实现OnPush
更改检测,这意味着脏检查检查不可变数据类型。 That means if you do object mutations like:这意味着如果您进行对象突变,例如:
this.items.push({id: 1, name: 'New item'})
Component will not detect a change.组件不会检测到更改。 Instead you need to do:相反,您需要执行以下操作:
this.items = [...this.items, {id: 1, name: 'New item'}];
This will cause the component to detect the change and update.这将导致组件检测更改和更新。 Some might have concerns that this is a pricey operation, however, it is much more performant than running ngDoCheck
and constantly diffing the array.有些人可能会担心这是一个ngDoCheck
操作,但是,它比运行ngDoCheck
并不断地比较数组的性能要高得多。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.