javascript - 如何通过@input 属性应用样式，我想增加 mat-autocomplete 的宽度

Question

一位 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> 

Answer 1

不要在component.ts中使用@Input() panelWidth，这是文档中的定义。作为最终用户，您应该按如下方式使用，

1. 硬编码值

<mat-autocomplete panelWidth ="170px" ...

1. 使用变量

// define variable in class
widthOfPanel = '170px';

通过绑定(bind)在 HTML 中使用它，

<mat-autocomplete [panelWidth]="widthOfPanel" ...