Angular 8下拉选项默认更新数组列表后的最后一个新值

Question

我正在使用Angular 8（TypeScript）。

我想默认选择调用服务后在数组集合中聚合的最后一个值，并更新数组的值，但始终显示占位符。我该怎么办？

<nb-select [(selected)]="selectedNumberCase" 
           placeholder="Select value" shape="round" size="small" 
            class="col-md-7 custom-padding" >
    <nb-option *ngFor="let item of caseNumberArray" (click)="onMenuItemSelected(item.value)"[value]="item.id">{{item.value}}</nb-option>
</nb-select>


populateNumberCase(newId:string,newValue:string){
    this.caseNumberArray.push({
        id:element.newId,
        value:element.newValue
    });
}

callService(){
    .......do something
    this.populateNumberCase(result.Id,result.Value);
    this.selectedNumberCase = result.Value;
}

Answer 1

尝试以下代码。如果不起作用，请尝试将“ selectionChange”替换为“ change”

<nb-select [(selected)]="selectedNumberCase" placeholder="Select value" shape="round" size="small" 
            class="col-md-7 custom-padding" >
      <nb-option
        *ngFor="let item of caseNumberArray"
        (selectionChange)="onMenuItemSelected(item.value)"
        [(value)]="item.id">
        {{ item.value}}
      </nb-option>
    </nb-select>

Answer 2

尝试一下。

假设您将在此变量中使用数组对象只是

初始化变量；

selectedOption;

在ngOnit（）函数中复制以下行。

this.selectedOption= this.selectedNumberCase[this.selectedNumberCase.length-1];

模板代码：：

<nb-select [(selected)]="selectedOption" placeholder="Select value" shape="round" size="small" 
            class="col-md-7 custom-padding" >
      <nb-option
        *ngFor="let item of caseNumberArray"
        (selectionChange)="onMenuItemSelected(item.value)"
        [(value)]="item.id">
        {{ item.value}}
      </nb-option>
    </nb-select>