angular - Angular 5+ Material Autocomplete 位置错误
问题描述
我正在尝试执行 angular material 网站中提供的示例以进行自动完成,当我在应用程序中实现它时,选项出现在其他地方而不是如图所示的输入下方
我目前在html 文件中有以下代码
<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 文件中的内容
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>
解决方案
修复它,我错过了角材料提供的预建主题。如果有人遇到同样的问题,只需添加
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
到styles.css
推荐阅读
- javascript - React js:单击按钮时React路由器不重定向
- c++ - 数组元素与 k 个数组元素的集合之间的最小距离总和(绝对差)
- r - R:如何更改列表中 df 的列类型并将列表与 df 与 bind_rows() 组合
- elm - 调试 JSON 解码器
- c# - HL7.FHIR.R4 (C#):无法将文字“2020-12-01T23:00:00.000Z”解析为日期。(在 Bundle.entry[0].resource[0].birthDate[0])
- ios - Swift Firebase RemoteConfig:如何在后台 fetchAndActivate
- java - WFLYEJB0467:请求被拒绝,因为容器被挂起
- java - 为什么我不能更改 JButton(禁用)文本颜色?
- sql-server - 从所有数据库中选择相同的表名
- angular - 在 Angular 模板中使用属性绑定时,类型“字符串”不可分配给类型“数字”