У меня есть этот объект 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 не обнаруживает ее как изменение. Как я могу сделать это, чтобы обнаружить изменение в значении поля объекта?

0
A. Ranjan 15 Апр 2019 в 21:26

2 ответа

Лучший ответ

Я понимаю, что вы связали объект с атрибутом value. Это неверно, поскольку атрибут value принимает только цифры или строки.

Однако, если вы хотите привязать объект к ion-option, вы должны использовать вместо этого свойство 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> 

Вы можете выбрать любой из методов, и двустороннее связывание данных должно работать соответствующим образом.

1
wentjun 15 Апр 2019 в 18:52

Не мутируйте, создайте новый объект. Вместо того

  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
}
0
mbojko 15 Апр 2019 в 20:30