我正在尝试在角度材料网站上提供自动完成的example,当我在应用程序中实现它时,选项出现在其他地方而不是在输入下如图所示
我目前在 html file 中有以下代码
<form class="example-form">
<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 class="example-option-img" aria-hidden [src]="state.flag"
height="25">
<span>{{state.name}}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
这就是我所拥有的 component.ts file
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
stateCtrl = new FormControl();
filteredStates: Observable < State[] >;
states: State[] = [
{
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'
}
];
constructor() {
this.filteredStates = this.stateCtrl.valueChanges.pipe(startWith(''),
map(state => state ? this._filterStates(state) : this.states.slice()));
}
private _filterStates(value: string): State[] {
const filterValue = value.toLowerCase();
return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
}
在我的 app.module.ts 中,我有进口内的formsmodule和reactiveformsmodule .
任何想法为什么选项没有出现在输入下,如何解决问题将不胜感激 .
忘记添加,父组件调用此子组件(自动完成),如下所示 .
<div>
...
<app-menu></app-menu>
...
</div>
1 回答
修复它,我错过了由角度材料提供的预建主题 . 如果有人有同样的问题,只需添加
到styles.css