Я работаю над этим приложением, в котором пользователь может создать студента, и выбираю страну для ссылки на запись студента. В MongoDB я создал две коллекции: одну для студентов и для одной страны.
Я использую Mat-Autocomplete для выбора и фильтрации списка стран в форме для студентов. Пока автозаполнение работает и получает информацию из страновой коллекции. Единственная проблема, с которой я сталкиваюсь, это то, что страны не показывают. Я хотел бы знать, что я делаю не так?
скриншот проблемы
См. Мой код ниже.
HTML
<input type="text" placeholder="Select Country" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let countries of filteredOptions | async" [value]="countries._id">
{{cName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Компонент TS
listCountries: Country[] = []
filteredOptions: Observable<any[]>;
myControl = new FormControl();
filteredOptions: Observable<any[]>;
ngOnInit() {
this.retCountries();
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private retCountries() {
this.countryService.getCountries().subscribe(countries =>
{
this.listCountries = countries;
}, err => this.errorHandler(err, 'Failed to get Countries')
);
}
private _filter(value: any): any[] {
return this.listCountries.filter(countries => {
return countries.cName.toLowerCase().indexOf(value.toLowerCase()) > -1;
})
}