Question

我来自反应背景，数据流只有一种方式，我需要对angular 4应用程序进行一些维护工作。升级对于我必须要做的任务太大。

我有一个表单，它通过api调用得到更新，该api调用将一个对象传递给具有@input属性的设置器：

export class UserFormComponent {
  @ViewChild('form') form: NgForm;

  @Input()
  set person(u: User) {
    this.userModel = {...u};

    this.form.reset(this.userModel);
  }

然后我有一个md-select：

<h1>{{ personModel.roleID }}</h1>
<h1>{{ personModel.email }}</h1>
<div class="mat-input-wrapper">
  <label for="roleID">Role</label>
  <md-select
    id="roleID"
    name="roleID"
    [(ngModel)]="personModel.roleID"
    class="md-input-container"
    required
  >
    <md-option *ngFor="let role of (roles | async)" [value]="role.id">
      {{ role.id }} - {{ role.name }}
    </md-option>
  </md-select>
</div>

md-select在ngModel上有两种数据绑定方式，问题是personModel对象来自异步api调用，原始开发人员编写的传递方式一个空对象将被传递给设置器：

  @Input()
  set person(u: User) {
    this.userModel = {...u};

    this.form.reset(this.userModel);
  }

发生这种情况时，“ personModel.roleID is undefined and it looks the two way databinding on the ngModel of the md-select`会在模型上将其设置为undefined。

当异步调用正确完成时，完整的personModel将具有roleID，但md-select似乎没有拾取更改，并且在模型上仍未定义。 / p>

对于这样声明的input不会发生相同的事情：

 <input
    id="firstname"
    name="firstname"
    type="text"
    mdInput
    placeholder="First Name"
    required
    pattern="\s*(\S\s*){1,}"
    [(ngModel)]="personModel.firstname"
    #firstname="ngModel"
  />

即使personModel.firstName从未定义变为其实际值，这种2种方式的数据绑定也似乎可以正常工作。

我认为在角度2+中不鼓励使用2种方式进行数据绑定，但是在这里似乎还活着并且可以踢。

任何人都知道为什么md-select会发生这种情况，并且有可能使用角度为2+的单向数据流吗？

角度为4 md-select的双向数据绑定恐怖

0 个答案: