在dropdown中放置文本"select option“，然后清除Angular中的下拉列表
在dropdown中放置文本"select option“，然后清除Angular中的下拉列表
提问于 2018-06-07 03:48:39
我有一个dropdown，我想要有一个默认的第一个空白元素，比如"select an option"，当用户选择一个dropdown元素时，这个第一个字段就会消失。后来，在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
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 04:15:23
如果我没理解错的话，我想下面就是你想要的。在要消失的选项中，您需要一个*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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50728432
复制相关文章
相似问题
腾讯云开发者
