Javascript Material.Angular.io mat自动完成[displayWith]功能更新范围变量

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

关于更新mat自动完成范围变量的任何想法或想法。 最终，我要做的是连接显示字符串和绑定到输入模型的变量。这是给我一个自动完成输入，为用户添加帮助文本，理想情况下文本是最新的，清除输入。文本当前正在连续连接，很快创建不可用的文本

html

---

您有两个选项，第一个选项只是调用

[displayWith]=“displayFn.bind（this）”

，这看起来很糟糕，但我可以确认这是有效的（尽管我在我的WebStorm上遇到一个错误，说“ng:Unknow Method bind”） 第二种方法是使用arrow函数来保存上下文。 大概是这样的：

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>

{{offer.name}

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>