Angular 如何在Mat Select中实现搜索功能

Angular 如何在Mat Select中实现搜索功能,angular,Angular,我有一个下拉列表,我想我在那里添加一个搜索选项,在我的情况下,当用户添加3个第一个字母时,该选项将搜索行业名称。 这是我的下拉列表: <div class="field-wrapper"> <div class="question-wrapper"> <h3 class="mat-subheading-1"> What is the main industry where your company is active? </h3

我有一个下拉列表,我想我在那里添加一个搜索选项,在我的情况下,当用户添加3个第一个字母时,该选项将搜索行业名称。 这是我的下拉列表:

 <div class="field-wrapper">
<div class="question-wrapper">
  <h3 class="mat-subheading-1">
    What is the main industry where
    your company is active?
  </h3>
</div>
<div class="field-box">

  <mat-form-field formGroupName="industry">
    <mat-select formControlName="id" placeholder="Industry" (selectionChange)="changed($event)">
      <mat-option>None</mat-option>
      <mat-option *ngFor="let item of industries" [value]="item.id">
        {{item.name}}
      </mat-option>
    </mat-select>

    <div
      *ngIf="industryForm.controls.id.invalid && (industryForm.controls.id.dirty || industryForm.controls.id.touched)"
      class="alert alert-danger">
      <mat-error *ngIf="industryForm.controls.id.errors.required">Must fill this field</mat-error>
    </div>
  </mat-form-field>
</div>
结果:如果用户编写了Edu,将显示教育

请告诉我,如果有人有什么想法的话,这对我真的很有帮助

我想做的只是稍微编辑一下,我想让搜索在用户写3封信时起作用

您可以使用ngx mat select SEARCH软件包实现相同的功能:

首次安装:

npm install ngx-mat-select-search
在app.module.ts中:

import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
在导入数组中:

imports: [
   ....,
   NgxMatSelectSearchModule 
]
HTML代码:

<mat-form-field>
    <mat-select [formControl]="control" ngDefaultControl placeholder="Tags" #Select>
        <ngx-mat-select-search [placeholderLabel]="'Search Item'" [noEntriesFoundLabel]="'No matching records found'" [formControl]="control"
         ngDefaultControl></ngx-mat-select-search>
        <mat-option class="m-t" *ngFor="let obj of filteredRecords | async" [value]="obj">
            {{obj}}
        </mat-option>
    </mat-select>
</mat-form-field>
TS代码:

import { takeUntil, take } from 'rxjs/operators';
import { FormGroup, FormControl, Validators } from '@angular/forms'
import { Subject, ReplaySubject } from 'rxjs/Rx';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
import { MatSelect } from '@angular/material/select';


@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample implements OnInit {
  items: any[] = [
    "Agriculture and Mining",
    "Business Services"
    , "Computer and Electronics"
    , "Consumer Services"
    , "Education"
    , "Energy and Utilities"
    , "Financial Services"
    , "Government"
    , "Health, Pharmaceuticals, and Biotech"
  ];


  /** control for the selected bank for multi-selection */
  public control: FormControl = new FormControl();

  private _onDestroy = new Subject<void>();
  public filteredRecords: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);

  @ViewChild('Select') select: MatSelect;

  ngOnInit() {
    this.setInitialValue();
    // set initial selection
    this.control.setValue([]);
    // load the initial bank list
    this.filteredRecords.next(this.items.slice());

    this.control.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterBanksMulti();
      });
  }

  private setInitialValue() {
    this.filteredRecords
      .pipe(take(1), takeUntil(this._onDestroy))
      .subscribe(() => {
        this.select.compareWith = (a: any, b: any) => a === b;
      });
  }

  private filterBanksMulti() {
    if (!this.items) {
      return;
    }
    // get the search keyword
    let search = this.control.value;
    if (!search) {
      this.filteredRecords.next(this.items.slice());
      return;
    } else {
      search = search.toLowerCase();
    }
    if (search.length >= 3) {
    // filter the banks
     this.filteredRecords.next(
      this.items.filter(item => item.toLowerCase().indexOf(search) > -1)
     );
    }
  }
}

你能分享stackblitz吗?>是的,请给我一分钟时间,我只是在那里分享代码,但我以前没有使用stackblitz,而且我遇到了一些错误,希望这不会是一个问题。尝试这个很困难:我已经尝试过了,但无法在@PrashantPimpaleYup!这就是为什么我说你必须做很多事情才能做到这一点!但这并不困难!一步一步走