首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在dropdown中放置文本"select option“,然后清除Angular中的下拉列表

在dropdown中放置文本"select option“,然后清除Angular中的下拉列表
EN

Stack Overflow用户
提问于 2018-06-07 03:48:39
回答 1查看 186关注 0票数 0

我有一个dropdown,我想要有一个默认的第一个空白元素,比如"select an option",当用户选择一个dropdown元素时,这个第一个字段就会消失。后来,在setInterval的帮助下,我试图清理我的下拉列表,不选择任何选项,并从一开始就看到下拉列表。我怎样才能做到这一点?这是我的代码。

代码语言:javascript
复制
 //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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-07 04:15:23

如果我没理解错的话,我想下面就是你想要的。在要消失的选项中,您需要一个*ngUf,并且需要绑定一些属性来触发它消失或重新出现。此外,在setTimeout中,由于没有使用箭头函数,因此将失去组件的作用域,因此当您更新这些值时,它们不会按预期应用于组件的实例。

//templates/home/home.component.html

代码语言:javascript
复制
<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

代码语言:javascript
复制
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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50728432

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档