angular - 如何侦听查找更改

Question

我在文档中的任何地方都找不到如何检测 Lookup 组件的更改。其他不使用 ngModel 的组件也是如此，例如 Pick。甚至在 GitHub 上也出现了相关问题，超过 2 个月没有回复。

这是示例代码：

<ngl-lookup [(value)]="value" [lookup]="lookupAsync" field="formatted_address" [(pick)]="address">
  <template nglLookupLabel>Type an address:</template>
  <div nglLookupHeader class="slds-text-body--small">Most relevant cities</div>
  <template nglLookupItem let-ctx>
    <div class="slds-media__body">
      <div class="slds-lookup__result-text">{{ctx.formatted_address}}</div>
      <span class="slds-lookup__result-meta slds-text-body--small">Place ID: {{ctx.place_id}}</span>
    </div>
  </template>
</ngl-lookup>

相关的采摘器可以在“查找”部分的组件页面上找到：

• http://ng-lightning.github.io/ng-lightning/#/components

我错过了什么吗？看到这么多组件不使用 ngModel，我真的很困惑。

预先感谢您的帮助。

Answer 1

[(pick)]="address"

1. 上面的语法是双向数据绑定。从某种意义上说，它将数据从组件绑定到输入和输入到组件。
2. 这是一个捷径[pick]="superhero" (pickChange)="setSuperhero($event)"

其中setSuperhero将更新值设置为this.superhero。

解决您的问题：

更改[(pick)]="superhero"为：

[pick]="superhero" (pickChange)="superheroPicked($event)"

内部组件：

superheroPicked(superhero){
    this.superhero = superhero; 
    console.log(superhero);
} 

以上将在选择时将超级英雄设置为新值，并在控制台中打印该值。

相关Plnkr：https ://plnkr.co/edit/FaTlh3wzreKkaKZORjKx?p=preview