Angular 无法使用下拉列表中的搜索过滤器显示具有初始值的mat select

我试图在angular2或更高版本的MatSelect下拉列表中使用angular2材料和Ng2SearchPipeModule实现搜索过滤器，但我面临一些问题。我需要

默认情况下，显示选择标记中的第一个元素

当我在搜索框中搜索任何内容时，它应该过滤掉

在搜索框中搜索任何内容后，如果我在matselect中未选择任何内容，则在我关闭下拉列表时，先前选择的选项应在Matdropdown中可见

现在，当我第一次加载页面时，我的搜索过滤器也可以正常工作，我可以看到默认情况下在Matselect中可见的第一个元素

但是当我在搜索框中搜索任何内容，然后关闭下拉菜单时，我的matselect将为空，之后当我再次打开matselect下拉菜单时，搜索框中仍有文本。而且控制台中没有任何错误

因此，我希望当我搜索任何内容时，不选择任何下拉菜单，它应该具有以前选择的菜单，当我关闭并重新打开下拉菜单搜索框时，应该清除

component.html'

  <mat-form-field>
          <mat-select [(ngModel)]="myValue">
              <input type="text" [(ngModel)]="term">
              <mat-option *ngFor="let o of allValues  | filter:myValue" 
              value="{{o.name}}">

            {{o.name}}{{o.id}}
            </mat-option>
          </mat-select>
     </mat-form-field>

          <p> Selected value: {{myValue}} </p>

但问题出现在最后一张显示空结果的图像中

---

从你的问题中提取参考资料，然后分析你的问题，我修改了代码，让你更简单

component.html

<mat-form-field>
      <mat-select [formControl]="bankCtrl" placeholder="Bank" >
        <mat-select-search [formControl] ="bankFilterCtrl"  [(ngModel)]="term"></mat-select-search>
        <mat-option *ngFor="let bank of filteredBanks | async | filter:term" [value]="bank">
          {{bank.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

{{bank.name}

组件。ts

term=''

  AllValues =[{
    id:1,
    name:'ashita ',
    description:'description 1'
  },{
    id:2,
    name:'deepak ',
    description:'description 2'
  },{
    id:3,
    name:'rahul 3',
    description:'description 3'
  }]

  allValues = this.AllValues;

  myValue: any = this.AllValues[0].name 

export class AppComponent implements OnInit{ 

  public bankCtrl: FormControl = new FormControl();
  public bankFilterCtrl: FormControl = new FormControl();
 public filteredBanks: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);


  private banks  = [
   {
    id:1,
    name:'ashita ',
    description:'description 1'
  },{
    id:2,
    name:'deepak ',
    description:'description 2'
  },{
    id:3,
    name:'rahul 3',
    description:'description 3'
  }
  ]


term='';


  ngOnInit() {
    // set initial selection
    this.bankCtrl.setValue(this.banks[1]);

    // load the initial bank list
    this.filteredBanks.next(this.banks.slice());


  }
}

导出类AppComponent实现OnInit{
public bankCtrl:FormControl=新建FormControl（）；
public bankFilterCtrl:FormControl=新建FormControl（）；
公共筛选器数据库：ReplaySubject=新ReplaySubject（1）；
私人银行=[
{
id:1，
姓名：'ashita'，
描述：'description 1'
},{
id:2，
姓名：'deepak'，
描述：'description 2'
},{
id:3，
姓名：'rahul 3'，
描述：'description 3'
}
]
术语=''；
恩戈尼尼特（）{
//设置初始选择
this.bankCtrl.setValue（this.banks[1]）；
//加载初始银行列表
this.filteredBanks.next（this.banks.slice（））；
}
}

---

看看这个，让我知道

从你的问题中提取参考资料，然后分析你的问题，我修改了代码，让你更简单

component.html

<mat-form-field>
      <mat-select [formControl]="bankCtrl" placeholder="Bank" >
        <mat-select-search [formControl] ="bankFilterCtrl"  [(ngModel)]="term"></mat-select-search>
        <mat-option *ngFor="let bank of filteredBanks | async | filter:term" [value]="bank">
          {{bank.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

{{bank.name}

组件。ts

term=''

  AllValues =[{
    id:1,
    name:'ashita ',
    description:'description 1'
  },{
    id:2,
    name:'deepak ',
    description:'description 2'
  },{
    id:3,
    name:'rahul 3',
    description:'description 3'
  }]

  allValues = this.AllValues;

  myValue: any = this.AllValues[0].name 

export class AppComponent implements OnInit{ 

  public bankCtrl: FormControl = new FormControl();
  public bankFilterCtrl: FormControl = new FormControl();
 public filteredBanks: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);


  private banks  = [
   {
    id:1,
    name:'ashita ',
    description:'description 1'
  },{
    id:2,
    name:'deepak ',
    description:'description 2'
  },{
    id:3,
    name:'rahul 3',
    description:'description 3'
  }
  ]


term='';


  ngOnInit() {
    // set initial selection
    this.bankCtrl.setValue(this.banks[1]);

    // load the initial bank list
    this.filteredBanks.next(this.banks.slice());


  }
}

导出类AppComponent实现OnInit{
public bankCtrl:FormControl=新建FormControl（）；
public bankFilterCtrl:FormControl=新建FormControl（）；
公共筛选器数据库：ReplaySubject=新ReplaySubject（1）；
私人银行=[
{
id:1，
姓名：'ashita'，
描述：'description 1'
},{
id:2，
姓名：'deepak'，
描述：'description 2'
},{
id:3，
姓名：'rahul 3'，
描述：'description 3'
}
]
术语=''；
恩戈尼尼特（）{
//设置初始选择
this.bankCtrl.setValue（this.banks[1]）；
//加载初始银行列表
this.filteredBanks.next（this.banks.slice（））；
}
}

---

看看这个，让我知道

我认为您为过滤管选择了错误的变量：）

这一行：

                                                   Here
                                                 \/\/\/\/
<mat-option *ngFor="let o of allValues  | filter:myValue" value="{{o.name}}">

这里
\/\/\/\/

将是：

<mat-option *ngFor="let o of allValues  | filter: term" value="{{o.name}}">

---

我认为您为过滤管选择了错误的变量：）

这一行：

                                                   Here
                                                 \/\/\/\/
<mat-option *ngFor="let o of allValues  | filter:myValue" value="{{o.name}}">

这里
\/\/\/\/

将是：

<mat-option *ngFor="let o of allValues  | filter: term" value="{{o.name}}">

---

我的回答解决了类似的问题。看看linkIt并没有解决我的问题，因为上面显示的是关于autocomplete，我想根据按键过滤掉我的matselect MacJohnny创建了这个，看一看，我检查了那个，但那个太复杂了，需要太多的代码更改，这就是为什么我要采用更简单的方法，类似的问题由我的答案解决了。看看linkIt并没有解决我的问题，因为上面显示的是关于autocomplete，我想根据按键过滤掉我的matselect MacJohnny创建了这个，看一看，我检查了一个，但是太复杂了，需要太多的代码更改，这就是为什么我要使用更简单的方法。它仍然在进行筛选，但没有选择默认选项。如果我打开并搜索某个内容，并保持原样，这里有一个

（openedChange）

事件在mat select state changes（选择状态更改）时被调用检查此处我已实现添加自定义逻辑以保留值它仍在执行筛选，但如果我打开并搜索某个内容并保持其原样，则不选择默认选项此处有一个

（openedChange）

当mat select状态更改时调用事件检查此处我已实现添加自定义逻辑以保留值感谢它对我有效。通过一次更改而不是mat select search，我使用了可用的ngx mat select search。感谢您刚刚保存了我。感谢它对我有效。通过一次更改而不是mat select search I已使用可用的ngx mat select搜索。谢谢您刚刚救了我。。