我需要从服务器获取一些数据,并将其显示到Material自动完成中。
事实是,当您单击输入字段时,无法立即获得结果。您必须在输入字段中键入一些内容才能返回一些结果。
我已经分叉并更改了Stackblitz上的自动完成演示,因此您可以看到我在说什么。在此演示中,我实际上并未从服务器获取数据。我只是用一些setTimeout来嘲笑它。但是行为几乎是相同的。
HTML:
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
TS:
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
export class State {
constructor(public name: string, public population: string, public flag: string) { }
}
@Component({
selector: 'autocomplete-overview-example',
templateUrl: 'autocomplete-overview-example.html',
styleUrls: ['autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample implements OnInit {
stateCtrl: FormControl;
filteredStates: Observable<any[]>;
states: State[];
constructor() {
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges
.pipe(
startWith(''),
map(state => state ? this.filterStates(state) : this.states)
);
}
ngOnInit() {
setTimeout(() => {
return this.states = [
{
name: 'Arkansas',
population: '2.978M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
name: 'California',
population: '39.14M',
// https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
},
{
name: 'Florida',
population: '20.27M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
},
{
name: 'Texas',
population: '27.47M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
}
];
}, 1000);
}
filterStates(name: string) {
return this.states.filter(state =>
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
}
PS:我已经进行了搜索和研究:)我发现了与我的问题有些相似的结果,但是细节完全不同,它们不是我想要的。所以我不得不单独问这个问题。
问题在于filteredStates
最初您没有分配任何值。检查以下修改后的代码:
constructor() {
this.stateCtrl = new FormControl();
this.stateCtrl.valueChanges.subscribe(val => {
this.filterStates(val);
});
}
ngOnInit() {
this.states = [
{
name: 'Arkansas',
population: '2.978M',
flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
name: 'California',
population: '39.14M',
flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
},
{
name: 'Florida',
population: '20.27M',
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
},
{
name: 'Texas',
population: '27.47M',
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
}
];
this.filteredStates = new Observable(observer => {
setTimeout(() => {
observer.next(this.states);
}, 1000);
});
}
filterStates(name: string) {
let filteredData = this.states.filter(state =>
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
this.filteredStates = new Observable(observer => {
observer.next(filteredData);
});
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句