时间戳

首页 > 解决方案 > 如何在 Angular 中为 mat-chip-list 的输入字段添加水平滚动？

angular - 如何在 Angular 中为 mat-chip-list 的输入字段添加水平滚动？

问题描述

我最近开始学习 Angular 和 Angular Material，但我想不出一种方法来将滚动条添加到 mat-chip-list 的扩展输入字段中。我的输入字段是可编辑的，同时还使用自动完成列表来填充数据。我尝试过类似的答案，要求您编辑 CSS，但没有一个对我有用。我需要芯片以水平滚动显示在一行中。现在，输入字段的大小刚刚增加以容纳芯片。

我的代码片段：

        <!--Keyword section-->
        <mat-form-field class="ranking-chip-list">
          <mat-chip-list #chipList>
            <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable" [removable]="removable"
              (removed)="remove(keyword)">
              {{keyword}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            </mat-chip>

            <input placeholder="Type your keywords to sort resumes..." #keywordInput [formControl]="keywordCtrl"
              [matAutocomplete]="auto" [matChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)" />
          </mat-chip-list>
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let keyword of filteredKeywords | async" [value]="keyword">
              {{keyword}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <!--Keyword section ends-->

如果我还应该链接 TypeScript 代码，请告诉我。

标签： angularscrollangular-material

解决方案

只需禁用芯片列表持有人的 flex-wrap

.mat-chip-list-wrapper {
    flex-wrap: nowrap;
    overflow-x: auto;
}

请注意，如果您在组件中有一些封装 - 您需要使用一些深度选择器或写入 styles.scss，也许这就是您尝试的 CSS 解决方案不起作用的原因，因为 css 是非常明显的单行解决方案

推荐阅读