Есть ли способ использовать ngModel и NgFor вместе? - PullRequest
Новая
       19

Есть ли способ использовать ngModel и NgFor вместе?

0 голосов
/ 03 июля 2018

Я хотел бы сбросить значения флажков, когда пользователь нажимает кнопку «отмена». Есть ли способ, которым я мог бы использовать ngFor и NgModel вместе, чтобы значения сбрасывались? Я пытаюсь установить объект, который *ngFor использует для более ранней версии.

HTML 

   <div *ngFor="let object of objects">
            <input [(ngModel)]="object.isSelected" type="checkbox"> 
   </div>

   <button type="button" (click)="cancel()">Cancel</button>

машинопись 

cancel(){
   this.object = this.unChangedObject;
}

Значения сбрасываются, но как я могу показать изменения пользователю?

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Вы можете посмотреть на это по-другому. Обновлять только при фиксации. Для этого вы можете использовать канал на *ngFor, который возвращает массив скопированных объектов. Это решение будет работать только с мелкими объектами, но вы также можете попытаться найти метод глубокого копирования (непроверенный код ниже):

труба 

@Pipe({
  name: 'copyArr'
})
export class CopyArrPipe implements PipeTransform {
  public transform(arr: object[] = []): object[] {
    return arr.map(obj => ({...obj}));
  }
}

шаблон 

<ng-container *ngIf="objects | copyArr as objectsCopy">

  <div *ngFor="let object of objectsCopy">
    <input [(ngModel)]="object.isSelected" type="checkbox"> 
  </div>

  <button type="button" (click)="cancel()">Cancel</button>
  <button type="button" (click)="commit(objectsCopy)">Commit</button>
</ng-container>

компонент 

@Component({...})
export class FooBarComponent {

  objects = [];

  cancel(){
    this.objects = [...this.objects];
  }

  commit(newObjects) {
    this.objects = newObjects;
  }
}
0 голосов
/ 03 июля 2018

Глубоко скопируйте ваш объект в другую переменную, используя Object.assign и назначьте его в функции отмены 

constructor(){
  this.unChangedObject = Object.assign({},this.object  )
}

cancel(){
   this.object = this.unChangedObject;
}
...