Saya menggunakan Angular mat-form-field dan setelah css berubah agar terlihat seperti mat-chip, saya ingin menyingkirkan kotak luar ini (mat-form-field-wrapper).

Need to get rid of the 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>
1
Aditya0033 6 Juli 2020, 10:47

1 menjawab

Jawaban Terbaik

Harap hapus tag mat-chip-list dan itu akan berfungsi dengan baik.

Kode:

<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>
1
Stack7 7 Juli 2020, 05:20