Mat Select 与芯片列表触发器配合使用效果不佳

Question

我正在尝试创建一个以芯片列表作为触发器的垫选择。所选选项会显示，但当所选选项需要第二行时就会出现问题。筹码开始溢出表单字段，这是图片和代码。我做错了什么？

我有什么

我想要实现的目标

我的 Angular 14 代码

<mat-form-field>
                            <mat-label>Manufacturing Days</mat-label>
                            <mat-select
                                (selectionChange)="selectedDay($event)"
                                formControlName="ManufacturingDays"
                                multiple>
                                <mat-select-trigger>
                                    <mat-chip-list>
                                        <mat-chip *ngFor="let days of selectedDays">
                                            {{ days.name }}
                                            <mat-icon matChipRemove>cancel</mat-icon>
                                        </mat-chip>
                                    </mat-chip-list>
                                </mat-select-trigger>

                                <mat-option
                                    *ngFor="let day of daysOfWeek"
                                    [value]="day.value">
                                    {{ day.name | translate }}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>

我已经尝试完全使用本示例中的代码（https://stackblitz.com/edit/angular-material-v9-mat-select-with-mat-chip-list?file=src%2Fapp%2Fselect- multiple-example.css）并且无法让它像示例中那样工作

Answer 1

我遇到了同样的问题，我最终通过向 mat-select 添加一个类（出于特殊性）然后在全局 styles.css 文件中使用它来解决它。

   <mat-form-field>
      <mat-label>Manufacturing Days</mat-label>
          <mat-select 
               class="your-class-name-here"
              (selectionChange)="selectedDay($event)"
               formControlName="ManufacturingDays"
               multiple>
               <mat-select-trigger>
               <mat-chip-list>
                 <mat-chip *ngFor="let days of selectedDays">
                {{ days.name }}
               <mat-icon matChipRemove>cancel</mat-icon>
               </mat-chip>
             </mat-chip-list>
           </mat-select-trigger>

         <mat-option
           *ngFor="let day of daysOfWeek"
              [value]="day.value">
               {{ day.name | translate }}
         </mat-option>
       </mat-select>
  </mat-form-field>

在你的全局CSS文件中

   .your-class-name-here {
    .mat-select-trigger {
      display:flex;
      align-items: flex-end;
      cursor:pointer;
      position:relative;
      box-sizing: border-box;
      width:100%
    }
  }