Question

我无法在文档中的任何位置找到如何检测Lookup组件的更改。对于不使用ngModel的其他组件也是如此，例如Pick。甚至有相关的issue on 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>

相关的plucker可以在＆＃34; Lookups＆＃34;的组件页面上找到。部分：

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

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

提前感谢您的帮助。

Answer 1

[(pick)]="address"

以上语法是双向数据绑定。从某种意义上说，它将数据从组件绑定到输入和输入到组件。
这是[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

如何监听查找更改

1 个答案: