2017-08-24 151 views
0

我有一个多选择下拉只有2个选项。我希望它没有默认选定的项目。目前,其默认值是列表中的第一个项目,即Rebadge。我希望它只是占位符。下面是我的HTML和打字稿角2:多选择没有默认值

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>

+0

在html之前的for循环中,您可以给出类似于的内容,并且在onchange()中可以更改所选值 –

回答

0

没有所谓的“占位符”在一个HTML元素<select>没有这样的事情。

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

像:

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

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