Angular 为<；mat select>；角材料成分

尝试使用angular material在angular 2中实现一个简单的应用程序。
我实现了一个带有分页的简单表格

我还使用了

mat select

组件，但为此，我希望实现一个搜索过滤器，从列表中键入并搜索所需的选项

下面显示的是我的.html文件

部门
{{dep}}





搜寻
重置
接近
帐号。
{{element.accno}
帐户说明
{{element.accdesc}}
调查员
{{element.investor}
帐户CPC
{{element.acccp}
位置
{{element.location}
ClientDeptID
{{element.cdeptid}
部门说明
{{element.depdesc}}

下面显示的是我的.ts文件

从'@angular/core'导入{Component，ViewChild}；
从“@angular/material”导入{MatPaginator，MatTableDataSource}；
@组成部分({
选择器：“应用程序帐户”，
templateUrl:“./account.component.html”，
样式URL:['./account.component.scss']
})
导出类AccountComponent{
部门=[
"行政电脑",，
“阿戈斯塔实验室”，
“艾利斯实验室”，
“巴格曼实验室”，
“生物成像资源中心”，
"基本工程",，
“卡萨诺瓦实验室”，
“达斯特实验室”，
“达内尔·詹姆斯实验室”，
“院长办公室”，
“能源顾问”，
"电子商店",，
"设施管理",，
“现场实验室”
];
displayedColumns=['accno'，'accdesc'，'Investor'，'accCPC'，'location'，'cdeptid'，'depdesc']；
数据源=新MatTableDataSource（元素数据）；
@ViewChild（MatPaginator）分页器：MatPaginator；
ngAfterViewInit（）{
this.dataSource.paginator=this.paginator；
}
}
导出接口元素{
账号：编号；
accdesc：字符串；
调查员：字符串；
acccp：字符串；
位置：字符串；
cdeptid：数字；
depdesc：字符串；
}
常量元素_数据：元素[]=[
{accno:5400343，accdesc:'ASTRALIS LTD'，调查员：'Kruger，James G'，accCPC:'OR'，地点：'ON'，cdeptid:110350，depdesc:'Kruger Laboratory'}
];

---

有人能帮我在我的应用程序中使用mat select组件实现搜索过滤器吗？

我发现angular的primefaces确实有一个允许搜索列表项的多选列表。它还包括一个内置的全选按钮！你可以在这里找到它

---

您可以使用npm install Priming安装primefaces--save

安装primefaces，尽管它的实现不正确，但我已经为此做了一些工作

组件。hml

`

`

HTML

解决办法相当简单。

---

应该很有魅力：）

我找到了搜索下拉列表值的解决方案

下面是html代码

<mat-select class="yourClass" [(ngModel)]="searchObj">
            <input class="yourClass" placeholder ="search " (keyup)="onKey($event.target.value)"> 
            <mat-option *ngIf="someCondition" [value]='Select'>Select</mat-option>
            <mat-option *ngFor="let data of dataArray" [value]="data">{{data}}</mat-option>
          </mat-select>

在下拉列表中提供的值内搜索给定值

selectSearch(value:string){
            let filter = value.toLowerCase();
            for ( let i = 0 ; i < this.meta.data.length; i ++ ) {
                let option = this.meta.data[i];
                if (  option.name.toLowerCase().indexOf(filter) >= 0) {
                    this.dataArray.push( option );
                }
            }
        }

selectSearch（值：string）{
让filter=value.toLowerCase（）；
for（设i=0；i=0）{
this.dataArray.push（选项）；
}
}
}

此函数用于调用api并获取数据的主搜索函数

这是元数据

searchDpDropdown（）{
for（设i=0；i

>
项目
搜索
{{option.label}

---

使用MatAutocomplete是最好的选择，而不是定制MatSelect以将键入搜索功能添加到选项列表中

自动完成是一种普通的文本输入，由一个 建议的选择

HTML:

<form class="example-form">
    <input type="text" placeholder="Search for a street" [formControl]="control" 
 [matAutocomplete]="auto">
         <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
      {{street}}
             </mat-option>
         </mat-autocomplete>
</form>

{{街道}

TS

control = new FormControl();
  streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
  filteredStreets: Observable<string[]>;

  ngOnInit() {
    this.filteredStreets = this.control.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    const filterValue = this._normalizeValue(value);
    return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
  }

  private _normalizeValue(value: string): string {
    return value.toLowerCase().replace(/\s/g, '');
  }

control=newformcontrol（）；
街道：字符串[]=[‘香榭丽舍大街’、‘伦巴第街’、‘修道院路’、‘第五大道’]；
过滤状态：可见；
恩戈尼尼特（）{
this.filteredStreets=this.control.valueChanges.pipe(
startWith（“”），
映射（值=>this.\u过滤器（值））
);
}
private_过滤器（值：string）：string[]{
const filterValue=此值；
返回this.streets.filter（street=>this._normalizeValue（street）.includes（filterValue））；
}
private _normalizeValue（值：string）：string{
返回值.toLowerCase（）.replace（/\s/g'）；
}

参考文献： ||

• 目前，您可以在

  垫选择上使用第三方组件：
  
  

• 演示（）

---

顺便说一句，这可能在即将发布的一些Angle Material版本中得到支持。讨论已经开始：

这不会过滤下拉列表，它只会告诉你是真是假。问题是你已经从stackblitz复制并粘贴了，但你不知道这里发生了什么。不确定你在说什么，我在我的应用程序中使用了上面的代码。我用同样的代码创建了stackblitz，以证明它是有效的。谢谢，它是有效的。为我工作，节省了我的时间！如果要在字符串中的任何位置搜索文本，请在旁注中使用

option.toLowerCase（）.includes（filter）

@GoranSu，Stackblitz链接不再起作用了，我想这就像说：

this.dataArray=this.meta.data.filter（i=>i.name.toLowerCase（）.indexOf（filter）>=0）非常有趣的解决方案！我没有发现任何其他文档谈论在select中放置输入标记，但这非常顺利。请描述错误和原因
<h4>mat-select</h4>
<mat-form-field>
  <mat-label>State</mat-label>
  <mat-select>
     <input (keyup)="onKey($event.target.value)"> // **Send user input to TS**
    <mat-option>None</mat-option>
    <mat-option *ngFor="let state of selectedStates" [value]="state">{{state}}</mat-option>
  </mat-select>
</mat-form-field>

states: string[] = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
    'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
    'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
    'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
    'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
    'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];

**// Initially fill the selectedStates so it can be used in the for loop** 
selectedStates = this.states; 

**// Receive user input and send to search method**
onKey(value) { 
this.selectedStates = this.search(value);
}

**// Filter the states list and send back to populate the selectedStates**
search(value: string) { 
  let filter = value.toLowerCase();
  return this.states.filter(option => option.toLowerCase().startsWith(filter));
}

<mat-select class="yourClass" [(ngModel)]="searchObj">
            <input class="yourClass" placeholder ="search " (keyup)="onKey($event.target.value)"> 
            <mat-option *ngIf="someCondition" [value]='Select'>Select</mat-option>
            <mat-option *ngFor="let data of dataArray" [value]="data">{{data}}</mat-option>
          </mat-select>

    onKey(value) { 
            this.dataArray= []; 
            this.selectSearch(value);       
        }

selectSearch(value:string){
            let filter = value.toLowerCase();
            for ( let i = 0 ; i < this.meta.data.length; i ++ ) {
                let option = this.meta.data[i];
                if (  option.name.toLowerCase().indexOf(filter) >= 0) {
                    this.dataArray.push( option );
                }
            }
        }

        searchDpDropdown(){
            for ( let i = 0 ; i < this.meta.data.length; i ++ ) {
                this.dataArray.push( this.meta.data[i] );
            }
        }

> <mat-form-field>
<mat-label>Items</mat-label>
<mat-select name="item" [(ngModel)]="selected">
  <form>
    <mat-form-field class="w-100">
      <input name="query" type="text" [(ngModel)]="query" matInput>
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>
  </form>
  <mat-option>
  </mat-option>
  <mat-option *ngFor="let option of options|appFilter:query" [value]="option">
    {{option.label}}
  </mat-option>
</mat-select>

<form class="example-form">
    <input type="text" placeholder="Search for a street" [formControl]="control" 
 [matAutocomplete]="auto">
         <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
      {{street}}
             </mat-option>
         </mat-autocomplete>
</form>

control = new FormControl();
  streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
  filteredStreets: Observable<string[]>;

  ngOnInit() {
    this.filteredStreets = this.control.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    const filterValue = this._normalizeValue(value);
    return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
  }

  private _normalizeValue(value: string): string {
    return value.toLowerCase().replace(/\s/g, '');
  }