Question

所以我在表单中有一个可选的下拉列表，我希望能够在单击其中一个值后清除选择。我没有也不想在我的组件中使用任何jQuery。

下拉组件：

<sui-select 
  class="selection"
  [(ngModel)]="value"
  [options]="options"
  labelField="text"
  valueField="value"
  [isSearchable]="searchable"
  [isDisabled]="isDisabled"
  [placeholder]="placeholder | translate"
  #select>
<sui-select-option *ngFor="let option of select.filteredOptions" [value]="option">
</sui-select-option>

@Component({
  selector: "[dropdown]",
  templateUrl: "./dropdown.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [MakeValueAccessorProvider(DropDownComponent)]
})

export class DropDownComponent extends BaseComponent<string> {
  @Input() label: string;
  @Input() placeholder: string;
  @Input("items") options: TextValue[];
  @Input() searchable: boolean = true;
  @HostBinding("class.field") fieldClass: boolean = true;

ngOnChanges() {
    if(this.options && this.options.length > 0) {
        this.options.forEach(o => o.text = this.translateService.translate(o.text))
    }
  }
}

使用下拉列表：

<div dropdown formControlName="primaryInstructorId" [items]="instructorItems" label="labels/selectinstructor" placeholder="labels/selectinstructor"></div>

<div *ngIf="form.get('primaryInstructorId').value" dropdown formControlName="secondaryInstructorId" [items]="instructorItems" label="labels/selectinstructor" placeholder="labels/selectinstructor"></div>

在我使用它的组件中，我希望能够使用控件名称清除下拉列表：secondaryInstructorId。通过单击我插入到数组的0索引中的值或单击值旁边的“x”按钮。

清除角度2语义ui下拉列表中的选择

0 个答案: