Question

我是Angular的初学者（我正在做Angular 2，而不是Angular.js），并试图编写一些需要两个输入并无需单击任何按钮即可对其进行操作的东西（例如双向）捆绑）。例如，如果我有两个文本输入，我希望另一个组件（比如说一个标签）包含两个串联的字符串。有办法吗？

Answer 1

您的基本模板看起来像

    <input type="text" [(ngModel)]="first">
    <input type="text" [(ngModel)]="second">
    <label>{{first}} {{second}}</label>

此模板正在使用ngModel指令进行双向数据绑定

Answer 2

当然可以。首先，您必须获得用户输入，例如：

@Component({
  selector: 'app-key-up2',
  template: `
    <input #box (keyup)="onKeyInput1(box.value)">
    <input #box (keyup)="onKeyInput2(box.value)">
    <p>{{input1}}{{input2}}</p>
  `
})
export class KeyUpComponent_v2 {
  input2 = ''
  input1 = '';
  onKeyInput1(value: string) {
    this.input1 = value
  }
 onKeyInput2(value: string) {
    this.input2 = value
  }
}

然后，仅在所选标签内显示输出，就像{{ }}一样。
参考：https://angular.io/guide/user-input

编辑：哦，对了，您也可以使用[(ng-model)]，请参见上面的答案。

具有多个输入的双向绑定

2 个答案: