平面选择过滤器

说明: 这是原始库的叉子,与最新的Angular版本保持相容性. 版本遵循了Angular的版本方案(例如使用库版13.xx用于Angular 13.x.x项目).

• 仓库 : https://github.com/devLukaszMichalak/mat-select-filter 互联网档案馆的存檔,存档日期2013-12-21
• 原始仓库 : https://github.com/mdliveston/mat-select-filter 互联网档案馆的存檔,存档日期2014-12-02

角材料的过滤组件 <mat-select> 滴滴声. 支持筛选字符串或对象的数组、选项组,并与NgModule和单独兼容 组件使用.

演示

斯塔克布里茨·德莫

安装

npm install @devlukaszmichalak/mat-select-filter

使用量

NG 模块

在基于模块的应用程序中导入 MatSelectFilter 模块

import {MatSelectFilterModule} from '@devlukaszmichalak/mat-select-filter';

@NgModule({
    ...
    imports: [MatSelectFilterModule],
    ...
})

export class AppModule { ... }

独立组件(自图书馆版本17.1.0起)

在独立组件中导入组件“ 导入” 阵列中的 MatSelectFilter 组件

import {MatSelectFilterComponent} from '@devlukaszmichalak/mat-select-filter';

@Component({
    ...
    standalone: true, // this flag is ommited in newer angular versions 
    imports: [MatSelectFilterComponent],
    ...
})

export class Component { ... }

基本示例

<mat-form-field>
    <mat-select>
        <mat-select-filter [array]="variables" (filteredReturn)="filteredVariables = $event"></mat-select-filter>
        <mat-option *ngFor="let variable of filteredVariables">
            {{ variable }}
        </mat-option>
    </mat-select>
</mat-form-field>

或使用新的控制流语法

<mat-form-field>
    <mat-select>
        <mat-select-filter [array]="variables" (filteredReturn)="filteredVariables = $event"></mat-select-filter>
        @for (variable of filteredVariables; track variable) {
            <mat-option>
                {{ variable }}
            </mat-option>
        }
    </mat-select>
</mat-form-field>

过滤对象

将过滤过的阵列与 [array] 。 。 。 . 它现在接受一个多亏了森·亚历山德鲁的阵列对象. 如果阵列包含对象,请指定要过滤的属性 [displayMember]数字 :

variables = [
    {id: 1, name: 'Alpha'},
    {id: 2, name: 'Beta'}
];

<mat-form-field>
    <mat-select>
        <mat-select-filter [array]="variables"
                           [displayMember]="'name'"
                           (filteredReturn)="filteredVariables = $event"></mat-select-filter>
        @for (variable of filteredVariables; track variable) {
            <mat-option>
                {{ variable }}
            </mat-option>
        }
    </mat-select>
</mat-form-field>

选项组

sat-select-filter 现在支持选项组支持 感谢Jenniferarce! 只要输入 [hasGroup] 布尔为真并添加您 [GroupArrayName] 字符串!

要过滤分组选项, 请额外使用 [hasGroup] 财务报告和审定财务报表 [groupArrayName]数字 :

<mat-select-filter
        [array]="groups"
        [hasGroup]="true"
        [groupArrayName]="'options'"
        [displayMember]="'name'"
        (filteredReturn)="filteredGroups = $event">
</mat-select-filter>

投入

产出

特征

• 用字符串或对象的数组工作
• 选项组支持
• 自定义占位符、颜色、旋转器和无结果消息
• 取消过滤
• 将输入集中在打开上
• 防止传播字母关键事件以避免选择问题

自定义样式

您可以在全局 Cs/ Css 文件中使用以下 CSS 类来覆盖样式 :

.mat-filter {
  // Styles the filter bar
}

.mat-filter-input {
  // Styles the input field
}

.spinner {
  // Styles the spinner
}

.no-results-message {
  // Styles the no-results message
}

示例

.mat-filter {
  background-color: purple !important;
}

.mat-filter-input {
  border: 1px solid black !important;
}

许可证

麻省理工学院