一位 friend 正确地指出使用@input 属性,如enter link description here 所示。 .我想应用新样式并更改 mat-autocomplete
的宽度。所以下拉宽度仍然很大。
我是 Angular 新手,我不知道如何使用这个属性,但这是我试过的方法,它不起作用。
组件.ts
@Input() panelWidth: string | number;// I tried initializing this here for ex:50px, gives error
尝试将属性作为属性应用于 mat-autocomplete,如下所示
<mat-autocomplete panelWidth ="170px" #auto="matAutocomplete" [displayWith] = "displayFn">
这是自动完成的整个 template.html 代码片段
<mat-form-field >
<input matInput [matAutocomplete]="auto" [formControl]="customerFilterControl">
<mat-autocomplete panelWidth ="170px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option *ngFor="let option of (filteredOptions | async)" [value] ="option">
{{option.name}} {{option.type}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
最佳答案
不要在component.ts中使用@Input() panelWidth
,这是文档中的定义。作为最终用户,您应该按如下方式使用,
- 硬编码值
<mat-autocomplete panelWidth ="170px" ...
- 使用变量
// define variable in class
widthOfPanel = '170px';
通过绑定(bind)在 HTML 中使用它,
<mat-autocomplete [panelWidth]="widthOfPanel" ...
关于javascript - 如何通过@input 属性应用样式,我想增加 mat-autocomplete 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58993523/