你好,我是新来的角2。
我可以使formGroup在添加在ng-选择,控制和预定义增值.
那太完美了。但是当单击按钮时,新的值按在ng-选择中,但是ng-选择,而不是更新。
这里我的柱塞
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 {}
哪里出问题了??
发布于 2017-06-29 21:09:42
看看我注意到的ng-select
源代码
ngOnChanges(changes: any) {
if (changes.hasOwnProperty('options')) {
this.updateOptionsList(changes['options'].isFirstChange());
}
因此,为了更新选项列表,您应该启动ngOnChanges
。这可以通过创建对options0
的新引用来完成。
this.options0 = this.options0.concat({"label":"test","value":"Test"});
或
this.options0 = [...this.options0, {"label":"test","value":"Test"}];
发布于 2017-06-29 21:11:20
您可以使用Array.slice()
对数组实例进行更新,以便让角度检测数组的变化。
this.options0 = this.options0.slice();
发布于 2021-01-28 01:17:39
变化检测
Ng-select组件实现OnPush
更改检测,这意味着对不可变数据类型的脏检查。这意味着,如果您执行对象突变,如:
this.items.push({id: 1, name: 'New item'})
组件将不会检测到更改。相反,你需要做的是:
this.items = [...this.items, {id: 1, name: 'New item'}];
这将导致组件检测更改和更新。有些人可能担心这是一种昂贵的操作,然而,它比运行ngDoCheck
和不断扩展数组要好得多。
https://stackoverflow.com/questions/44838862
复制相似问题