# @devlukaszmichalak/mat-select-filter 中文文档

规范地址：https://npmcn.com/package/%40devlukaszmichalak/mat-select-filter/

版本：22\.0\.0
npm 元数据更新时间：2026-06-10T06:44:22.855Z
中文译文更新时间：2026-11-12T03:34:40.547Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40devlukaszmichalak/mat-select-filter
原文对照：https://npmcn.com/package/%40devlukaszmichalak/mat-select-filter/?lang=original
项目主页：https://github.com/devLukaszMichalak/mat-select-filter#readme
源码仓库：https://github.com/devLukaszMichalak/mat-select-filter

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：43.4 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common ^22，@angular/core ^22，@angular/material ^22
- 首次发布：2024-04-09T21:53:44.757Z
- 最新版本发布：2026-06-10T06:44:22.734Z
- 近 30 天下载量：5708（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 3 个）

## 中文简介

用于选择垫片的过滤器

## 安装

```sh
npm install @devlukaszmichalak/mat-select-filter
```

也可以使用：`pnpm add @devlukaszmichalak/mat-select-filter`、`yarn add @devlukaszmichalak/mat-select-filter`、`bun add @devlukaszmichalak/mat-select-filter`

## README

# 平面选择过滤器

> **说明:** 这是原始库的叉子,与最新的Angular版本保持相容性. 版本遵循了Angular的版本方案(例如使用库版13.xx用于Angular 13.x.x项目).
> 
> -   仓库 : [https://github.com/devLukaszMichalak/mat-select-filter 互联网档案馆的存檔,存档日期2013-12-21](https://github.com/devLukaszMichalak/mat-select-filter)
> -   原始仓库 : [https://github.com/mdliveston/mat-select-filter 互联网档案馆的存檔,存档日期2014-12-02](https://github.com/mdlivingston/mat-select-filter)

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

## 演示

[斯塔克布里茨·德莫](https://stackblitz.com/edit/mat-select-filter)

## 安装

```sh
npm install @devlukaszmichalak/mat-select-filter
```

## 使用量

### NG 模块

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

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

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

export class AppModule { ... }
```

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

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

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

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

export class Component { ... }
```

## 基本示例

```angular2html
<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>
```

或使用新的控制流语法

```angular181html
<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]`数字 :

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

```angular181html
<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]`数字 :

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

## 投入

| 投入 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `array` | 任何\[ | —— 说 | 要过滤的矩阵( 需要) . |
| `placeholder` | 字符串 | 寻找.. | 搜索输入的占位符文本 . |
| `color` | 字符串 | 白话 | 过滤栏的背景颜色 . |
| `displayMember` | 字符串 | —— 说 | 要过滤/播放的属性名称( 对于对象阵列) . |
| `showSpinner` | 布尔 | 真实 | 过滤时显示旋转器 . |
| `noResultsMessage` | 字符串 | "没有结果" | 未找到结果时要显示的消息 . |
| `hasGroup` | 任意 | —— 说 | 启用选项组过滤( 设置为真值) . |
| `groupArrayName` | 字符串 | —— 说 | 组数组属性名称( 用于 `hasGroup`) (中文(简体) ). |
| `filterDebounceTime` | 编号 | 0 个 | 过滤器输入的跳动时间( ms) . |

## 产出

| 产出 | 说明 |
| --- | --- |
| `filteredReturn` | 在每个过滤动作后释放被过滤的数组. |

## 特征

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

## 自定义样式

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

```scss
.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
}
```

示例

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

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

## 许可证

麻省理工学院

## 常见问题

### @devlukaszmichalak/mat-select-filter 是什么？

用于选择垫片的过滤器

### 如何安装 @devlukaszmichalak/mat-select-filter？

在项目目录运行 npm install @devlukaszmichalak/mat-select-filter，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（^22）、@angular/core（^22）、@angular/material（^22）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @devlukaszmichalak/mat-select-filter 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @devlukaszmichalak/mat-select-filter 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @devlukaszmichalak/mat-select-filter 可以商用吗？

@devlukaszmichalak/mat-select-filter 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @devlukaszmichalak/mat-select-filter 的下载量有多少？

根据 npm 官方下载统计，@devlukaszmichalak/mat-select-filter 在 2026/10/12 – 2026/11/10 这 30 天内被下载 5,708 次，日均约 190 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @devlukaszmichalak/mat-select-filter 还在维护吗？

最新版本 22\.0\.0 发布于 2026/06/10（5 个月前）；至今共发布 16 个版本，其中过去 12 个月发布了 3 个；首次发布于 2024/04/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。