[英]md-autocomplete angular2 getting data from server (with a service)
I would like to fetch data from server using Autocomplete Component with angular2 / material2.我想使用带有 angular2/material2 的自动完成组件从服务器获取数据。 ( https://material.angular.io/components/component/autocomplete )
( https://material.angular.io/components/component/autocomplete )
ts 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 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>
Service: userService.getUsersByEmail(email)
is pulling this kind of data:服务:
userService.getUsersByEmail(email)
正在拉这种数据:
['email1@email.com','email2@email.com','email3@email.com']
I have no errors but no results in the autocomplete.我没有错误,但在自动完成中没有结果。 I see in debugger of chrome (tab network) Data are pulled correctly for each changes in the input
我在 chrome (tab network) 的调试器中看到输入中的每个更改都正确提取了数据
ill give you my example that i usually use,我给你我通常使用的例子,
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 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>
just like that就这样
This is how i done.我就是这样做的。
.html .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 .ts
filteredData: Observable<any[]>; // async pipe needs to be an Observable
myContent: any[] = [];
this.filteredData = this.myformGroup.get('search').valueChanges
.debounceTime(400)
.switchMap(value => {
// get data from the server. my response is an array [{id:1, text:'hello world'}] as an Observable
return this.myApiService.getSearch(value);
}).map(res => this.myContent = res);
let me know if this works for you.让我知道这是否适合您。
my.component.html我的组件.html
<form [formGroup]="myForm"> <mat-form-field> <input matInput formControlName="email" [matAutocomplete]="autoEmailGroup" name="email" type="email" placeholder="Email" aria-label="Email" /> <mat-autocomplete autoActiveFirstOption #autoEmailGroup="matAutocomplete"> <mat-option *ngFor="let email of emailOptions | async" [value]="email">{{ email }}</mat-option> </mat-autocomplete> </mat-form-field> </form>
my.component.ts my.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, tap, switchMap, map, filter } from 'rxjs/operators';
import { empty } from 'rxjs/observable/empty';
@Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
emailOptions: Observable<string[]>;
constructor(
private fb: FormBuilder,
private http: HttpClient,
) { }
createForm() {
this.myForm = this.fb.group({
email: new FormControl(),
});
const _fetchEmailsFromServer = (): Observable<string[]> => {
// TODO you need to ultilize your service here
return empty();
};
this.emailOptions = this.myForm.get('email')!.valueChanges
.pipe(
startWith(''),
switchMap((input: string) => {
return _fetchEmailsFromServer().pipe(
// handle your HTTP response here
map((response: any): string[] => {
return <string[]> response!.data!.emails;
}),
tap((emails: string[]) => {
// LOGGING
console.log('Received emails:', emails);
}),
// you can filter emails fetched from your server here if you want
);
}),
).pipe(
// default value to be displayed before HTTP task is completed
startWith([]),
);
}
}
Reference:参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.