Angular 2 - 如何在单击时更新特定值

Question

下面的代码用作基于 Google Places API 的自动完成;一旦我开始在输入字段上键入一些字符，它就会开始获取并显示一些地名;我想做的是，当我单击生成的place时，它会替换我从knowing that I have 2 input field below写入的字段的当前值，以便我需要该值click替换当前值写入特定字段的值。

  <ion-item><ion-input #pickUp (keyup)="updateSearch(pickUp.value)" type="text" placeholder="Pickup"></ion-input></ion-item>
  <ion-item><ion-input #dropOff (keyup)="updateSearch(dropOff.value)" placeholder="Dropoff"></ion-input></ion-item>
  <ion-list>
    <ion-item *ngFor="let item of autocompleteItems" tappable (click)="chooseItem(item)">
       {{ item }}
     </ion-item>

我相信答案是实现ng-model但在这种情况下我没有弄清楚该怎么做。

Answer 1

首先，如果您坚持对两个输入使用单个列表，则必须能够确定要更新的输入。

这可以通过在输入元素上添加焦点(和/或更改等(事件处理程序来实现，并更新一个标志，以将最后一个焦点输入保留在这两个元素之间。

<ion-item><ion-input #pickUp (keyup)="updateSearch(pickUp.value)" type="text" placeholder="Pickup" (focus)=setLastFocused("pickup")></ion-input></ion-item>
<ion-item><ion-input #dropOff (keyup)="updateSearch(dropOff.value)" placeholder="Dropoff" (focus)=setLastFocused("dropoff")></ion-input></ion-item>

在您的 .ts 文件上：

private lastFocusedName;
// So now you know which input to update after you "chooseItem(item)"
setLastFocused(inputName){
   lastFocusedName = inputName;
}

现在，为了更新输入元素的值，您需要使用 Angular 的@ViewChild装饰器获取对它们的引用。更多信息 ：Angular.io 视图儿童

// The ViewChild parameter name must match the template variable name e.g. "#pickup" 
@ViewChild("pickUp") pickUp: ElementRef;
@ViewChild("dropOff") dropOff: ElementRef;
chooseItem(item){
   if(this.lastFocusedName == "pickup"){
      // Update pickup input
      this.pickUp.value = item.value;
   }
   else if(this.lastFocusedName == "dropoff"){
      // Update dropoff input
      this.dropOff.value = item.value;
   }
}

不要忘记导入所需的模块：

import { ElementRef, ViewChild } from "angular2/core";