NG-選択こんにちは私は新しいですAngularjs 2

Question

に更新していない私はNG-選択controllアドインでformGroupを作成し、値を事前に定義することができますangularjs 2

では付け加えました。

これは完全です。 ボタンをクリックすると新しい値が押し込まれますが、選択は更新されません。ここ

私plunker間違っている

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 {} 

???

Answer 1

ng-selectソースコードを見ては、私はあなたがngOnChangesを発射するオプションが一覧表示更新するために、

ngOnChanges(changes: any) { 
    if (changes.hasOwnProperty('options')) { 
    this.updateOptionsList(changes['options'].isFirstChange()); 
    } 

ので

に気づきました。あなたがの変化を検出角度せるために、配列インスタンスに更新する Array.slice()を使用することができます options0

this.options0 = this.options0.concat({"label":"test","value":"Test"}); 

または

this.options0 = [...this.options0, {"label":"test","value":"Test"}]; 

Modified Plunker

Answer 2

に新しい参照を作成することによって行うことができますアレイ。

this.options0 = this.options0.slice();