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

【问题标题】：how to sync 2 value of 2 String Interpolation to one Input ngModel angular 6如何将 2 个字符串插值的 2 个值同步到一个输入 ngModel angular 6
【发布时间】：2018-10-12 10:45:15
【问题描述】：

在html代码中，4个值必须是3个ngModel，其中一个是两个值的组合，如何将两个值绑定到一个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'
  };

【问题讨论】：

你不能那样做...... angular怎么知道如何为你分割字符串？
@Andrew 我不知道这种情况下的最佳解决方案是什么？

标签： angular angular4-forms

【解决方案1】：

您可以像这样使用属性并在 getter/setter 中进行连接/拆分：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(' ');
}

【讨论】：