在下拉列表中放置文本“选择选项”,然后清除Angular中的下拉列表

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (127)

我有一个下拉列表,我希望默认情况下有一个第一个空白元素,比如“选择一个选项”,当用户选择一个下拉元素时,第一个字段就会消失。稍后在setInterval的帮助下,我试图清理我的下拉列表,不选择任何选项,并从头开始查看下拉列表。我怎样才能实现它?这是我的代码。

 //templates/home/home.component.html

<select  [(ngModel)]='myselect' >
 <option [value]="" selected  >select and option</option>
 <option  *ngFor='let option of test' [value]="option.id">  
 {{option.nombre}}</option>
</select>

 //components/home/home.component.ts

 title = 'app';
 myselect:any;
 test:any= [{"id": "1", "nombre":"pedro" },{"id": "2", 
 "nombre":"yeison" }];
 ngOnInit() {
   this.timeoutFun();
 }

 timeoutFun() {
 setTimeout(function(){
 //clear my dropdown 
 this.myselect=""; 
 }, 5000);
}

这是我的代码:

https://stackblitz.com/edit/angular-n8x7xo?file=src/app/templates/home/home.component.html

提问于
用户回答回答于

如果我理解正确,我认为以下是你想要的。你需要一个*ngUf可以消失的选项和一些绑定它的属性,它会触发它消失或重新出现。此外,在setTimeout中,由于您没有使用箭头函数,因此您正在丢失组件的范围,因此在更新这些值时,它们不会按预期应用于组件的实例。

//templates/home/home.component.html

<h1>This is home component</h1>
<button (click)="open()">Open Modal</button>
<br>
<select  (ngModel)='myselect' (change)="updateOptions()" >
  <option *ngIf="foo" [value]="" selected  >select and option</option>
  <option  *ngFor='let option of test' [value]="option.id">  
 {{option.nombre}}</option>
</select>

//components/home/home.component.ts

import { Component } from '@angular/core';
import { AppService } from '../../services/app.service';
import { ModalModel } from '../../models/modal.model';

declare let $: any;


@Component({
  selector: 'home',
  templateUrl: '../../templates/home/home.component.html',
  providers: [AppService]

})
export class HomeComponent {
  title = 'app';
  foo = true;

  modelData = new ModalModel();
    constructor(
        private _service: AppService
    ){}
    myselect:any;
    test:any= [{"id": "1", "nombre":"pedro" },{"id": "2", "nombre":"yeison" }];
    ngOnInit() {
      this.timeoutFun();
    }
    timeoutFun() {
        setTimeout(() =>{
        //clear my dropdown 
        this.myselect=""; 
        this.foo = true;
        alert('here');
      }, 5000);
    }
    open() 
    {
      this.modelData.header = 'This is my dynamic HEADER from Home component';
      this.modelData.body = 'This is my dynamic BODY from Home component';
      this.modelData.footer = 'This is my dynamic footer from Home component';
      this._service.open(this.modelData);
    }
updateOptions() {
  this.foo = false;
}



}
用户回答回答于

这里是您需要做的更改才能使其工作。

  1. 您需要导入FormsModule应用程序模块。
  2. 添加以选择(ngModelChange)以启动超时。
  3. 调用setTimeoutngModelChange中引用的回调并将选项设置为空数组以清除输入。

您可以使用rxjs计时器和switchMap代替使用setTimeout,以便在发生更改时,如果尚未调用,则会取消先前的超时。

部分模板

<select [(ngModel)]='myselect' (ngModelChange)="cleaner.next()" >
  <option  *ngFor='let option of optionsSource' [value]="option.id">  
    {{option.nombre}}</option>
</select>

部分组件

export class HomeComponent {
  optionsSource = [];
  cleaner = new Subject<any[]>();
  myselect:any;
  test:any= [{"id": "1", "nombre":"pedro" },{"id": "2", "nombre":"yeison" }];

  ngOnInit() {
    this.optionsSource = [{id: undefined, nombre: "select and option"}].concat(this.test);
    this.cleaner.pipe(
      filter(() => this.myselect !== undefined),
      switchMap(() => timer(5000).pipe(tap(x => this.optionsSource = [])))
    ).subscribe();
  }
}

当模型被更改时,清洁器被“缩小”。对清理程序的订阅首先检查myselect的值是否尚未定义。如果它超过了过滤器,switchMap那么将从一个timerobservable 开始一个新的订阅,它将选项设置为一个空数组。

这是一个非常好的模式,以便在超时完成之前可以从值更改中产生副作用,并且switchMap是一个非常有用的操作员。

扫码关注云+社区

领取腾讯云代金券