具有多個輸入的雙向綁定

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