如何将 2 个字符串插值的 2 个值同步到一个输入 ngModel angular 6

Question

在html代码中必须是3个ngModel 4个值，其中一个是两个值的组合，如何将两个值绑定到一个ngModel？

          <span class="user">{{userInfo.FirstName}} {{userInfo.LastName}}</span>
          <span class="user">{{userInfo.Mobile}}</span>
          <span class="user">{{userInfo.Email}}</span>

          <input [(ngModel)]='userInfo.FirstName userInfo.LastName' />
          <input [(ngModel)]='userInfo.Mobile' />
          <input [(ngModel)]='userInfo.Email' />

ts:

  userInfo = {
     FirstName: 'x',
     LastName: 'y',
     Mobile: '09999999999',
     Email: 'x@gmail.com'
  };

Answer 1

您可以使用属性并在 getter/setter 中执行 join/split，如下所示：https://stackblitz.com/edit/angular-ytfbsn?file=src%2Fapp%2Fapp.component.ts

get firstAndLastName() {
  return this.userInfo.FirstName + (this.userInfo.LastName ? ' ' + this.userInfo.LastName : '');
}
set firstAndLastName(value: string) {
  const parts = value.split(' ');
  this.userInfo.FirstName = parts[0] || '';
  this.userInfo.LastName = parts.slice(1).join(' ');
}

如何将 2 个字符串插值的 2 个值同步到一个输入 ngModel angular 6

how to sync 2 value of 2 String Interpolation to one Input ngModel angular 6

angular

angular4-forms