如何从 Mat-form-field 中删除 Mat-form-field-wrapper？答案

【问题标题】：How to remove Mat-form-field-wrapper from Mat-form-field?如何从 Mat-form-field 中删除 Mat-form-field-wrapper？
【发布时间】：2020-10-26 07:23:37
【问题描述】：

我正在使用 Angular mat-form-field，在 css 更改使其看起来像 mat-chip 之后，我想摆脱这个外盒（mat-form-field-wrapper）。

<div class="flex">
 <div class="etc">
  <mat-chip-list i18n-aria-label aria-label="Selected Roles">
  <form [formGroup]="filterForm" >
  <mat-form-field appearance="outline" class="no-line" >

  <mat-select
    i18n-aria-label
    i18n-placeholder
    disableOptionCentering
    multiple
    aria-label="Experience level filter"
    formControlName="experienceLevelsFilter"
     placeholder="Experience Level"
    panelClass="panel-below-field"
    (selectionChange)="filterChange($event, 'experienceLevels')"
   >
    <mat-select-trigger>
      Experience Level {{ getSelected("experienceLevels") }}
    </mat-select-trigger>

    <mat-option
      *ngFor="let experienceLevel of experienceLevels"
      class="experience-level-option"
      [value]="experienceLevel"  >
      {{ experienceLevel.getName() }}
    </mat-option>
    </mat-select>
   </mat-form-field> 
  </form>
 </mat-chip-list>
</div>

【问题讨论】：

你能创建stackbltz吗？
发布演示以便我们提供帮助。
添加了询问详情的代码。谢谢！

标签： html css angular mat-form-field

【解决方案1】：

请删除 mat-chip-list 标签，它应该可以正常工作。

代码：

<div class="flex">
 <div class="etc">
  <form [formGroup]="filterForm" >
  <mat-form-field appearance="outline" class="no-line" >

  <mat-select
    i18n-aria-label
    i18n-placeholder
    disableOptionCentering
    multiple
    aria-label="Experience level filter"
    formControlName="experienceLevelsFilter"
     placeholder="Experience Level"
    panelClass="panel-below-field"
    (selectionChange)="filterChange($event, 'experienceLevels')"
   >
    <mat-select-trigger>
      Experience Level {{ getSelected("experienceLevels") }}
    </mat-select-trigger>

    <mat-option
      *ngFor="let experienceLevel of experienceLevels"
      class="experience-level-option"
      [value]="experienceLevel"  >
      {{ experienceLevel.getName() }}
     </mat-option>
    </mat-select>
   </mat-form-field> 
  </form>
</div>

【讨论】：