Angular 2：没有默认值的多选答案

【问题标题】：Angular 2: Mulitple select with no default valueAngular 2：没有默认值的多选
【发布时间】：2018-02-01 18:21:47
【问题描述】：

我有一个多选下拉菜单，只有 2 个选项。我希望它没有默认选定的项目。目前，它的默认值是列表中的第一项，即Rebadge。我希望它只是占位符。下面是我的html和打字稿

export class Filters {
  staff: any[];
  type: any[];
}

export class ProductListFilterComponent implements OnInit {
  selected = new Filters();
  typeOptions = [
    "Rebadge",
    "Only Once"
  ];
  
  constructor( private activatedRoute: ActivatedRoute ){
    this.selected.type = [];
  }
  
  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params: Params) => this.queryParamsHandler(params)   )
    
  queryParamsHandler(params?: Params) {
    if (params['type'] && params['type'] !== '') {
      this.selected.type = params['type'];
       $('#typeOption').dropdown('set selected', params['type']);
    } else {
      $('#typeOption').dropdown('clear');
    }
  }
}

<app-select [aria-label]="'Type'"
            [id]="'typeOption'"
            [panelClass]="'filter multiple fluid search'"
            [placeholder]="'Select Multiple...'"
            [multiple]="true"
            [selected]="selected.type"
            (change)="selected.type = $event">
    <option *ngFor="let type of typeOptions" [value]="type">{{ type }}</option>
</app-select>

【问题讨论】：

嘿，在 for 循环之前的 html 中，您可以提供类似之类的内容，在 onchange() 中您可以更改所选值

标签： jquery angular typescript angular2-forms multiple-select

【解决方案1】：

HTML 中没有 <select> 元素的“占位符”。

通常所做的是禁用选定的选项。

喜欢：

<select>
  <option selected disabled>And your answer is?</option>
  <option >Yes!</option>
  <option >No.</option>
  <option >Maybe...</option>
</select>

我不习惯 Angular，所以我不能说...但是你现在知道要寻找什么了。

【讨论】：