如何通过@input 属性应用样式，我想以角度增加垫子自动完成的宽度

Question

一位朋友正确地指出要使用属性@input，如在此处输入链接描述中所示。我想应用新样式并更改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

不要@Input() panelWidth在 component.ts 中使用，这是文档中的定义。作为最终用户，您应该按如下方式使用，硬编码值<mat-autocomplete&nbsp;panelWidth&nbsp;="170px"&nbsp;...使用变量//&nbsp;define&nbsp;variable&nbsp;in&nbsp;class widthOfPanel&nbsp;=&nbsp;'170px';在带有绑定的 HTML 中使用它，<mat-autocomplete&nbsp;[panelWidth]="widthOfPanel"&nbsp;...

Answer 2

试试你的风格/deep/ .mat-autocomplete-panel {&nbsp; &nbsp; min-width: 133px;&nbsp; &nbsp; max-width: 340px;//your desire width&nbsp; &nbsp; width: 100%;}使用/deep/时，你的风格在内部component css别人不，如果你在全球范围内风格用它stlye.scss