html - 如何使 Creative Tim Angular Material Pro 在过滤器面板上显示多选下拉列表？

问题描述

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

有人可以向我展示需要进行哪些更改的示例吗？（无论是在 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>

使用下拉列表的 HTML，然后只需添加扩展表单组件中的 HTML 来替换上面的内容，并将代码添加到 fixedplugin.component.ts 中（在构造函数上方的第 19 行）。

src/app/shared/fixedplugin.module.ts 还需要以下导入（并添加到模块导入中）才能使材料下拉列表起作用：

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）当下拉列表在每次单击列表中的项目时触发选择更改事件时，如何触发选择事件？

原始的固定插件看起来像：

在进行上述更改后，我看到的是展开前正确显示的下拉列表（见左侧红色矩形和红色椭圆），但孤立面板仅在展开时显示下拉列表内容（见右侧红色椭圆）。

感谢所有有用的帮助。

标签： htmlangulartypescriptangular-material

html - 如何使 Creative Tim Angular Material Pro 在过滤器面板上显示多选下拉列表？

问题描述

解决方案

推荐阅读