Question

我使该对象selectedTask与[{ngModel）]绑定到<ion-select>标签。但是，当对selectedTask中的字段值进行更改时，不会更新Dom以反映值的更改。

这是html部分：

<ion-label>Select Task</ion-label>
<ion-select [(ngModel)]="selectedTask" #A (ionChange)="updateChangedTask(false)">
      <ion-option *ngFor="let task of tasklist" [value]="task">{{task.taskName}}</ion-option>
</ion-select>
</ion-item>

.ts文件：

constructor(private changeDetector: ChangeDetectorRef ...){ }

public selectedTask = {
  taskName: "",
  taskID: "" 
};

...

changeTask(task: any){
  this.selectedTask.taskName = task.taskName;
  this.selectedTask.taskID = task.taskID;
  this.changeDetector.detectChanges();
}

调用changeTask()时，下拉列表中选择的值不会更改。我知道原因-因为selectedTask的引用没有更改，并且Angular并没有将其检测为更改。如何检测对象字段值的变化？

Answer 1

我知道您已将对象绑定到value属性。这是不正确的，因为value属性仅接受数字或字符串。

但是，如果要将对象绑定到ion-option，则应使用将task属性绑定到ngValue

<ion-label>Select Task</ion-label>
  <ion-select [(ngModel)]="selectedTask" #A (ionChange)="updateChangedTask(false)">
    <ion-option *ngFor="let task of tasklist" [ngValue]="task">{{task.taskName}}</ion-option>
  </ion-select>
</ion-item>

如果您希望绑定一个字符串/数字而不是整个对象，则需要对component.html和component.ts进行以下更改

首先，将selectedTask绑定到taskID字符串

public selectedTask: string = '';

changeTask(task: any){
  this.selectedTask = task.taskID;
}

然后，将ion-options的value属性绑定到保存字符串值的task.taskID。

<ion-label>Select Task</ion-label>
  <ion-select [(ngModel)]="selectedTask" #A (ionChange)="updateChangedTask(false)">
    <ion-option *ngFor="let task of tasklist" [value]="task.taskID">{{task.taskName}}</ion-option>
  </ion-select>
</ion-item>

您可以选择采用其中任何一种方法，并且双向数据绑定应该相应地起作用。

Answer 2

不要变异，请创建新对象。代替

  this.selectedTask.taskName = task.taskName;
  this.selectedTask.taskID = task.taskID;

例如

 this.selectedTask = Object.assign({}, task);

另一种方法：使用基元（例如字符串）代替对象作为值。

<ion-select [(ngModel)]="selectedTask" #A (ionChange)="updateChangedTask(false)">
      <ion-option *ngFor="let task of tasklist" [value]="task.taskID">{{task.taskName}}</ion-option>
</ion-select>

和在TS中：

public selectedTask = "";

//...

changeTask(task: any) {
  this.selectedTask = task.taskID;
  this.changeDetector.detectChanges(); // may be unnecessary
}

查看对象属性的更改未更新

2 个答案: