Question

我希望能够输入input元素并能够使用我的组件中输入的内容。我无法弄清楚如何做到这一点。一旦我获得了输入元素的值，我将使用事件发射器与父组件进行通信。

如果我能弄清楚如何在输入内容时调用方法并获取正在键入的内容，这将解决我的问题。我想要在输入内容时更新@Input时可以更新分析器设置。

如果对analystSettings的更新导致父组件分析人员设置更新，那将是非常棒的。

这是我的HTML：

<div style="margin: 2em;">
  <card>
    <h5>{{analystSetting.analyst}}</h5>
    <hr>
    <label>Alias</label>
    <input type="text" placeholder="eg. John Smith"[value]="analystSetting.alias">

    <label>Percentage of principle</label>
    <input type="number" placeholder="eg. 20" [value]="analystSetting.targetModifier * 100">

    <select>
    <option [attr.selected]="analystSetting.active?true:null">Active</option>
    <option [attr.selected]="!analystSetting.active?true:null">Disabled</option>
   </select>
   <button (click)="onSaveClicked()">Save</button>
   </card>
 </div>

这是我的组成部分：

import { Component, OnInit, Input, Output, EventEmitter, OnChanges, DoCheck } from '@angular/core';
import { AnalystSetting } from './AnalystSetting';

@Component({
  moduleId: module.id,
  selector: 'app-analyst-settings',
  templateUrl: 'analyst-settings.component.html'
})
export class AnalystSettingsComponent {
  @Input() analystSetting: AnalystSetting;
  @Output() updatedAnalyst: EventEmitter<Object> = new EventEmitter();

  constructor() {}
}

Answer 1

您可以使用ngModel

<input type="text" placeholder="eg. John Smith"[(ngModel)]="analystSetting.alias" name="name">

您需要导入FormsModule

另见https://angular.io/docs/ts/latest/guide/forms.html

如果Angular尝试在设置analystSetting之前呈现您的输入，则可能会在控制台中收到有关null没有属性alias的错误。

您可以将表单打包为<card *ngIf="analystSetting">，以延迟表单呈现，直到analystSetting可用。

Answer 2

您可以将输入绑定到HTML keypress事件并在组件中处理它，如下例所示：

<input type=text (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
}

我希望有所帮助。

角度2输入元素数据绑定。如何使用组件中的输入值

2 个答案: