Question

你好，我使用Angular 5和材料作为我的项目，我试图改变自动完成面板的宽度，用例子，我现在可以正确地显示选项，但我看不到所有选项的信息，然后我修改了新组件的css文件，但它不适用于材料组件，有人可以告诉我该怎么做吗？

这是组件的html：

<mat-expansion-panel [expanded]="panelOpenState === true">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Critère de recherche
        </mat-panel-title>
        <mat-panel-description>
          Saisir un numéro de procédure
        </mat-panel-description>
      </mat-expansion-panel-header>

      <mat-form-field>
        <input id="autocomplete" type="text" matInput placeholder="number" [ngControl]="inputControl"  
                [(ngModel)]="searchValue" [matAutocomplete]="auto" (keyup)="onChange()">
        <mat-autocomplete #auto="matAutocomplete" class="class1">
          <mat-option *ngFor="let procedure of filteredProcedures | async" [value]="procedure.procedureId">
            <span>{{procedure.procedureId}} | </span>
            <small>{{procedure.firstName}} </small>
            <small>{{procedure.lastName}}</small>
            <small>{{procedure.userId}}</small>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
      <button class="pull-right btn btn-info" (click)="search()">
        <span matTooltip="Chercher une procédure">
          <i class="fa fa-search"></i> Chercher </span>
      </button>
    </mat-expansion-panel>

和css文件：

.mat-button {
    color: white
}

#autocomplete {
    width: 400px, !important;
}
.class1 {
    width: 400px, !important;
}

.cdk-overlay-pane {
    width: 400px;
}

我也试过使用：host，但它不起作用。

:host ::ng-deep mat-autocomplete-panel(class1) {
   width : 400px;
}

你能告诉我错误在哪里吗？

我想显示选项的所有/更多信息。

事实上，使用css文件，正确应用了按钮样式。但它不适用于自动完成面板，为什么？

谢谢。

Answer 1

从你的css中移除逗号（然后宽度有效），你不能使用：host作为伪，因为它不是伪元素。 Pseudos列表在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

#autocomplete {
        width: 400px !important;
    }
    .class1 {
        width: 400px !important;
    }

更改材料组件的样式不起作用

1 个答案: