Material.Angular.io mat-autocomplete [displayWith]函数更新范围变量

Question

我遇到了一个问题，我可以在组件控制器中访问本地声明的变量来实例化mat-autocomplete。我面临的问题是局部变量卡在这个范围内，我无法更新它们。

有关更新mat-autocomplete范围变量的任何想法或想法。

最终我正在做的是连接显示字符串和绑定到输入模型的变量。这给了我一个自动完成输入，为用户添加帮助文本，理想情况下文本是最新的清除输入。该文本目前不断连接，很快就会创建无法使用的文本

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>