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>

Answer 2

如果我使用一个例子，MyClass，其中

@Input() modeCity = false；

在ngOnInit()中，我可以访问并更改modeCity。它反映在类中的其他方法上。

在HTML中，

然后对于方法itemDisplayFn(项目：..)在ts文件中，modeCity未定义。

我发现不知何故，itemDisplayFn()方法有静态上下文。因此我创建了这个属性，

静态staticModeCity = false；

可以像这样在ngOnInit()中设置staticModeCity，

MyClass.staticModeCity = true

并在方法itemDisplayFn()中使用，如下所示

if(MyClass.staticModeCity) ....

我不知道为什么会这样。当然，如果同一组件在同一父组件中多次使用，则静态可能会发生冲突。