Angular 8 个下拉选项默认为更新 ArrayList 后的最后一个新值

Question

我正在使用 Angular 8 (TypeScript)。

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

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

Angular 8 个下拉选项默认为更新 ArrayList 后的最后一个新值

Angular 8 Dropdown Options Default Last New Value After Update ArrayList

angular

nebular