多输入双向绑定

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)]，见上面的答案。