视图未随着对象的更改而更新属性

Question

我有这个对象 selectedTask 2 向绑定 [(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>

如果您更愿意绑定 string/number 而不是整个对象，则需要对 component.html 和 component.ts[=20= 进行以下更改]

首先，将 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
}

视图未随着对象的更改而更新属性

View Not getting updated with change in the object property

cordova

ionic-framework

ionic3

angular

视图未随着对象的更改而更新 属性

View Not getting updated with change in the object property

cordova

ionic-framework

ionic3

angular

视图未随着对象的更改而更新属性