如何使用Nebular，nb-select设置预选选项

Question

https://akveo.github.io/nebular/docs/components/select/overview#nbselectcomponent

在加载页面时，是否可以预选一个值？

Answer 1

试试这个：

<nb-select id="theme" [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
        <nb-select-label [innerHtml]="selectedTheme"></nb-select-label>
        <nb-option langg *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name | langg }}</nb-option>
      </nb-select>

Answer 2

虽然存在issue with dynamic data，但对于静态数据，它的工作方式与您提到的文档中的描述相同：

HTML：

<nb-select placeholder="Select Showcase" [(selected)]="selectedItem">
      <nb-option value="">Option empty</nb-option>
      <nb-option value="0">Option 0</nb-option>
      <nb-option value="1">Option 1</nb-option>
      <nb-option value="2">Option 2</nb-option>
      <nb-option value="3">Option 3</nb-option>
      <nb-option value="4">Option 4</nb-option>
    </nb-select>

TS：selectedItem = '2';

Answer 3

在为nbSelect多表单控制器动态生成选项和显示已经选中的项时，我也遇到了同样的问题。我可以像下面这样实现。

file.html

<nb-select
  fullWidth
  placeholder="{{ title }}"
  formControlName="value"
  multiple
>
    <nb-option
      *ngFor="let option of options"
       value="{{ option.key }}"
    >
      {{ option.value }}
    </nb-option>
</nb-select>

file.ts

let selectedOptionKeys = ["48c50001-dd7e-11eb-ad02-1d1ad36d5a53", "bc2edbd4-dfa4-11eb-a78c-5d1ee44adbd1", "636348eb-e992-11eb-9bb8-71a14542f9ee"]
this.formBuilder.group({
     value: new FormControl(selectedOptionKeys),
});