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

Question

我最近开始学习Angular&Angular Material和我想不出一种方法来为mat-chip列表的扩展输入字段添加滚动条。我的输入字段是可编辑的，同时也使用自动完成列表来填充数据。我试过类似的答案，要求你编辑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代码。

Answer 1

仅禁用芯片列表持有者的柔性包装

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

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