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 ViewChild

// 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";

Angular 2 - 如何更新点击

1 个答案: