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

问题描述

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

我的代码段：

    import tkinter as tk
    from tkinter import ttk
    
    
    app = tk.Tk()
    app.geometry("800x300")
    
    greeting = tk.Label(text="Kodyfikator")
    greeting.pack()
    
    
    
    list_one = ttk.ComboBox(app,values = [1,2,3]).place(x=10,y = 50)
    list_two = ttk.ComboBox(app,y = 80)
    list_three = ttk.ComboBox(app,y = 110)
    list_four = ttk.ComboBox(app,y = 140)
    list_five = ttk.ComboBox(app,y = 170)
    list_six = ttk.ComboBox(app,y = 200)
    list_seven = ttk.ComboBox(app,y = 230)
    list_eight = ttk.ComboBox(app,y = 260)
    chosenlist = tk.StringVar(list_one)
    
    results = tk.Label(app,text = chosenlist).place(x=200,y=10) # Todo
    
    app.mainloop()

请告诉我是否也应该链接TypeScript代码。

解决方法

只为芯片列表持有者禁用flex-wrap

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

请注意，如果您在组件中进行了某些封装-您需要使用一些深层选择器或在styles.scss中进行编写，也许这就是为什么您尝试使用CSS解决方案无效的原因，导致CSS很明显是一类解决方案

angular angular-material scroll