在角度4中从模态添加新项目后更新ng-select项目

Question

我需要在从模态

添加新值后更新角度4中的ng-select

在console.log中，我可以在列表中查看新添加的项目，但它没有反映在下拉列表中

任何人都可以建议

我有以下代码

  

city.component.ts

导出类CityComponent实现OnInit {

public myForm: FormGroup; // our model driven form

public city0: Array<any> = [];

constructor(private _fb: FormBuilder) {

    this.city0=[ {value:'City A',label:'City A'},
    {value:'City B',label:'City B'},
    {value:'City C',label:'City C'},
    {value:'City D',label:'City D'},];

}

add_new_city(model, isValid: boolean){

    this.submitted = true; // set form submit to true

    const data = this.newCityForm.value;
    this.city0.push({
    'value': data.new_city_name,
    'label' : data.new_city_name
    });

}

}

  

city.component.html

<div class="form-group">
<label class="col-sm-2 control-label">City</label>
<div class="col-sm-4">

    <ng-select 
        formControlName="city_name"
        [options]="city0"

        [multiple]="multiple0"
        [allowClear]="true"
        [(ngModel)]="cityName"

        >
    </ng-select>  

</div>
<div class="col-sm-2">
    <button type="button"(click)="openModal(template)">Add New City</button>
</div>

</div>
    <ng-template #template>
        <div class="modal-header">
            <h4>Add City</h4>

        </div>
        <div class="modal-body">

            <div class="form-group row">
                <label for="new_city_name" >City Name</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="new_city_name" formControlName="new_city_name">
                </div>
            </div>  
        </div>
        <div class="modal-footer">
            <span  class="col-sm-5 ">
                <button type="button"  (click)="modal.hide()">Close</button> 
                <button type="button"  (click)="add_new_city(newForm.value, newForm.valid)>Save</button>
            </span>                                    
        </div>
    </ng-template>