Question

我有一个 app.component.html

<input type="text" [(ngModel)]="keystroke">
{{keystroke}} <!-- prints out each keystroke -->

和 app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  keystroke = '';
}

这会成功打印出我在搜索框中输入的每个按键值。

但是，我正在尝试将击键的值发送到 task.service.ts getResults（）函数> （下面的代码），以便我可以使用键击值来进行api调用。

import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class TaskService { constructor(private http: Http) { console.log("Task service initialized..."); } //get our result for each keystroke, return it as an observable (json) getResults() { return this.http.get('http://localhost:8080/api/KEYSTROKES') .map(res => res.json()); } }

但是，我无法弄清楚如何做到这一点。在 app.component.html 中，我可以使用 {{keystroke}} ，但引用 task.service.ts 中的击键值似乎并不那么简单。

如何将我的击键数据发送到我的 task.service.ts ，以便我可以运行我的api通话？

此外，我正在尝试以“正确的方式”创建一个Angular 2应用程序，因此欢迎所有批评。

Answer 1

将事件处理程序绑定到您的输入

<input (ngModelChange)="getResults($event)" ...>

或者

<input (keyup)="getResults($event)" ...>

请参阅 https://angular.io/guide/user-input#get-user-input-from-the-event-object

在Angular 2中将数据从组件发送到服务文件

1 个答案: