md-autocomplete angular2从服务器获取数据(使用服务)
问题描述:
我想从使用自动完成组件的angular2/material2服务器获取数据。 (https://material.angular.io/components/component/autocomplete)md-autocomplete angular2从服务器获取数据(使用服务)
TS
emailCtrl: FormControl;
filteredEmails: any;
constructor(
private companieService: CompanieService,
) {
this.emailCtrl = new FormControl();
this.filteredEmails = this.emailCtrl.valueChanges
.startWith(null)
.map(email => this.filterEmails(email));
}
filterEmails(email: string) {
this.userService.getUsersByEmail(email)
.subscribe(
res => {
return res
},
error => {
console.log(error);
}
)
}
HTML
<md-input-container>
<input mdInput placeholder="Email" [mdAutocomplete]="auto" [formControl]="emailCtrl" [(ngModel)]="fetchedUser.profile.email">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let email of filteredEmails | async" [value]="email">
{{email}}
</md-option>
</md-autocomplete>
服务:userService.getUsersByEmail(email)
是拉这样的数据:
['[email protected]','[email protected]','[email protected]']
我在自动完成没有错误,但没有结果。 我看到了铬(选项卡网络)的调试数据被正确拉为输入中的每个变化
答
我给你我的例子,我通常使用,
this.SearchForm.controls['city_id'].valueChanges
.debounceTime(CONFIG.DEBOUNCE_TIME)
.subscribe(name => {
this.domain = [['name', 'ilike', name]];
this.DataService.getAutoComplete('res.city', this.domain)
.subscribe(res => {
return this._filteredCity = res['result']['records']
})
})
HTML
<div class="mb-1 ml-1 mt-1" fxFlex="30">
<md-input-container style="width: 100%" >
<input mdInput placeholder="Kota" (blur)="checkAutoComplete('city_id')" [mdAutocomplete]="city_id" [required]="true" [formControl]="SearchForm.controls['city_id']">
</md-input-container>
<md-autocomplete #city_id="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let city of _filteredCity" [value]="city">
<span>{{ city.name }}</span>
</md-option>
</md-autocomplete>
<div *ngIf="SearchForm.controls['city_id'].hasError('required') && SearchForm.controls['city_id'].touched" class="mat-text-warn text-sm">Kolom ini wajib diisi.</div>
</div>
就像那样
+0
有什么办法可以让用户点击输入框而不是等待输入第一个字母时显示所有可用的信息? –
答
这就是我所做的。
的.html
<input formControlName="search" [mdAutocomplete]="auto" type="text" class="form-control">
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let data of filteredData | async" [value]="data.text">
{{ data.text }}
</md-option>
</md-autocomplete>
.TS
filteredData: Observable<any[]>; // async pipe needs to be an Observable
myContent: any[] = [];
this.filteredData = this.myformGroup.get('search').valueChanges
.debounceTime(400)
.do(value => {
// i don't want to make another request on value change if content placeholder already has it.
let exist = this.myContent.findIndex(t => t.text === value);
if (exist > -1) return;
// get data from the server. my response is an array [{id:1, text:'hello world'}]
this.myApiService.getSearch(value).subscribe((res: any[]) => { this.myContent = res; });
}).delay(500).map(() => this.myContent);
让我知道,如果这对你的作品。
有什么方法可以让用户在输入框中点击时显示所有可用内容,而不是等待输入第一个字母? –