Просмотр Не обновляется при изменении свойства объекта

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, вам следует использовать свойство bind 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;
}

И затем вы связываете value атрибут ion-options с 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>

и в ТС:

public selectedTask = "";

//...

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