Material.Angular.io mat-autocomplete [displayWith] function 更新 scope 变量

Question

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

关于更新 mat-autocomplete scope 变量的任何想法或想法。

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

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>

组件.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 并更改它。 它反映在 class 中的其他方法。

在 HTML，

<mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="itemDisplayFn" (optionSelected)="selected($event)">

然后对于 ts 文件中的方法 itemDisplayFn(item: ..)，modeCity 未定义。

我发现 itemDisplayFn() 方法以某种方式具有 static 上下文。 因此我创建了属性，

static staticModeCity = false;

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

MyClass.staticModeCity = true

并像这样在方法 itemDisplayFn() 中使用，

if(MyClass.staticModeCity)....

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