如何侦听查找更改

Question

>我在文档中找不到如何检测查找组件更改的任何地方。对于不使用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