这是使用 mat-autocomplete 的演示应用程序,我从 stackoverflow 帖子中挑选出来 enter link description here ,我想显示选项的整个值。当值很长时。我发现了类似的问题 enter link description here但这并没有解决我的问题。我可以滚动并查看值,可以修改 css 样式以便滚动条正确可见。
看起来滚动条的剩余部分被隐藏了!
我试过了
.mat-option {
z-index:5000;
height:300px;
}
什么都没有解决!
如果元素显示完整就更好了。
代码片段 template.html
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete" panelWidth="320px">
<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>
typescript.ts
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 CaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCalifornia',
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'
}
];
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);
}
最佳答案
你有3种方法来解决这个问题
1.将滚动添加到 mat-option
因为你已经在你的问题中有了它
2.给mat-select
赋予宽度,但是如果mat-option
太长也会有问题。
3.这个选项是用来换行的 - 添加下面的css到mat-option
.mat-option {
word-break: break-all;
white-space: normal;
height: unset;
}
关于css - 在 mat-autocomplete 中悬停时如何显示整个选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59670262/