Material.Angular.io毡自动填充[displayWith]函数的更新范围的变量

Question

我遇到了一个问题，我可以在组件控制器实例化垫自动完成本地访问声明的变量。我现在面临的问题是局部变量都卡在这个范围内，我不能更新它们。

有关更新垫自动完成范围变量的任何意见或想法。

最终，我在做什么是拼接显示字符串并绑定到输入模型的变量。这是给我的自动完成输入，增加了辅助性的文本对于用户来说，最好的文字是最新与清除输入。文本目前正在不断地串联，很快产生无法使用文本

HTML

  <input
   [(ngModel)]="filter>

  mat-autocomplete
    #auto="matAutocomplete" 
    [displayWith]="displayFn">
    <mat-option
      *ngFor="let option of filteredOptions | async"
      [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>

component.ts

  displayFn(search): string | undefined {
    if(!search) return; //check if the search isn't already populated
    if(!search.match(/(=|\*)/)){
      if(this.filter){
        this.filter += ' ' + search + '==*term*';
      }else{
        this.filter = search +'==*term*';

      }
      return this.filter; //this isn't persisting across the lifecycle
    }
  }

Answer 1

你有两个选择，第一个是刚才打电话[displayWith]="displayFn.bind(this)"看起来可怕，但我可以证实，这个工程（虽然我得到了我的WebStorm一个错误说“NG：不明方法绑定”），第二个是使用箭头功能为了保护环境。事情是这样的：

displayFn(offer?: Offer): string | undefined {
    return offer && offer.name == this.currentOffer.name ? offer.name : undefined;
}

displayFnWrapper() {
   return (offer) => this.displayFn(offer);
}

而在模板：

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFnWrapper()" (optionSelected)='assign($event.option.value)'>
    <mat-option *ngFor="let offer of filteredOffers$ | async" [value]="offer">{{ offer.name }}</mat-option>
</mat-autocomplete>