如何让Creative Tim Angular Material Pro在滤镜面板上显示多选下拉列表？

Question

我有有限的CSS/SCSS技能，但需要改变标准的Creative Tim Angular Pro材料模板。

有没有人能给我举个例子，说明需要改变的是什么？(无论是在HTML中，还是在Creative Tim堆中的许多CSS文件中)。

我从同一个项目中获取了多选下拉列表代码。

src/app/forms/extendedforms

从extendedforms.component.html (第49-55行)：

    <mat-form-field>
        <mat-select multiple placeholder="Multiple Cities" [(ngModel)]="currentCity" name="Paris" ariaLabel="cities[0]">
            <mat-option *ngFor="let city of cities" [value]="city.value">
                {{ city.viewValue }}
            </mat-option>
        </mat-select>
    </mat-form-field>

从extendedforms.component.ts (第27-36行)：

currentCity: string[];

selectTheme = 'primary'; // Irrelevant but left in to show original code
cities = [
  {value: 'paris-0', viewValue: 'Paris'},
  {value: 'miami-1', viewValue: 'Miami'},
  {value: 'bucharest-2', viewValue: 'Bucharest'},
  {value: 'new-york-3', viewValue: 'New York'},
  {value: 'london-4', viewValue: 'London'},
  {value: 'barcelona-5', viewValue: 'Barcelona'},
  {value: 'moscow-6', viewValue: 'Moscow'},
];

我正在尝试将多选下拉列表添加到过滤器面板

src/app/shared/fixedplugin.

至fixedplugin.component.html更换(第10-21行)颜色按钮：

    <a href="javascript:void(0)" class="switch-trigger active-color">
        <div class="ml-auto mr-auto">
        <span class="badge filter badge-green" data-color="projcycle"></span>
        <span class="badge filter badge-purple" data-color="purple"></span>
        <span class="badge filter badge-azure active" data-color="azure"></span>
        <span class="badge filter badge-green" data-color="green"></span>
        <span class="badge filter badge-orange" data-color="orange"></span>
        <span class="badge filter badge-danger" data-color="danger"></span>
        <span class="badge filter badge-rose" data-color="rose"></span>
        </div>
        <div class="clearfix"></div>
    </a>

使用下拉列表的超文本标记语言，然后只需添加来自扩展表单组件的超文本标记语言来替换上面的内容，并将代码添加到fixedplugin.component.ts中(在构造函数上方的第19行)。

src/app/shared/fixedplugin.module.ts还需要以下导入(并添加到模块导入)才能使material下拉列表工作：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../app.module';

因此，最终的fixedplugin.module.ts如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FixedpluginComponent } from './fixedplugin.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../../app.module';

@NgModule({
  imports: [
    CommonModule,

    FormsModule,
    MaterialModule
  ],
  declarations: [FixedpluginComponent],
  exports: [FixedpluginComponent]
})
export class FixedpluginModule { }

我有两个问题：

1)当点击展开下拉列表时，“过滤器组件”面板隐藏，只留下填充的列表面板可见(固定插件和下拉列表的顶部都隐藏)。

2)当drop list每次点击列表中的某一项都会触发on- selection -change事件时，如何触发selection事件？

原始的修复插件如下所示：

​

​

在上述更改之后，我看到的是展开前正确显示的下拉列表(请参阅左侧红色矩形和红色椭圆形)，但孤立面板在展开时仅显示下拉列表内容(请参阅右侧红色椭圆形)。

​

​

所有有用的帮助都得到了感谢。

Answer 1

我尝试了很多方法(不感谢Creative Tim付费支持的请求)，包括将z-index设置为3000。我最终得到了一个答案，我添加到src/styles.scss中，并将mat-select设置为display made left：-300。

请参阅How to customize mat-select dropdown position

填充渲染到滤镜的左侧，该滤镜仍然低于滤镜一个层，但UX运行良好。