Question

我正在使用"@ng-select/ng-select": "^2.9.1",作为选择框。我想在选项标签内将其选中。就像我们用普通的html一样。

<option value="option" selected="selected">Option</option>

像上面我想做的角度ng-select。下面是我的代码：

<ng-select class="required" bindLabel="datafield.label" bindName="datafield.iddatas_field" (change)="addDatafile($event,i)" >

    <ng-option *ngFor="let optionsl of datafield.dataOptionsList" [value]="optionsl.option" >{{optionsl.option}}</ng-option>
</ng-select>

我尝试将这些代码作为<ng-option>中的属性使用，但不起作用：

selected="selected"
[selected]="true"

Answer 1

ng-select的工作原理有些不同。您没有ng-options，而是将可用选项与[items]绑定，并指定项目的标签和值，例如

<ng-select [items]="myItems" [(ngModel)]="model.selectRes" bindLabel="label" bindValue="id">
</ng-select>

这将与项目数组相对应，其中每个项目（或选项）都有一个标签，其中包含要显示的文本和文本所引用的值。

[（ngModel）]将ng-select绑定到您的模型。 ng-select选择绑定值，因此在您的.ts中，只需将model.selectedRes设置为所需值，然后选择该值。

Answer 2

您可以使用反应性表单控件，并将该值传递给要放置所选控件的控件。会

Answer 3

查看以下链接： https://stackblitz.com/edit/angular5-select-option-dropdown

component.ts：

  private selectedname ;
   NAMES  = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];

    onChangeName($event) {
console.log(this.selectedname);

    }

component.html：

  <label>Highlight</label>
  <select  [(ngModel)]="selectedname" (change)="onChangeName($event)">

                        <option [label] ="name" *ngFor="let name of NAMES" [selected]="selected" [value]="name">{{name}}</option>
 </select>
 <p>{{selectedname}}</p>

ng-select：在角度6中选择的ng-option不起作用

3 个答案: