有没有办法一起使用 ngModel 和 NgFor ？答案

【问题标题】：Is there a way to use ngModel and NgFor together?有没有办法一起使用 ngModel 和 NgFor ？
【发布时间】：2018-07-03 08:06:29
【问题描述】：

我想在用户单击“取消”按钮时重置复选框的值。有没有办法可以一起使用 ngFor 和 NgModel 以便重置这些值？我正在尝试将*ngFor 使用的对象设置为早期版本。

HTML

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

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

TypeScript

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

这些值会重置，但我如何向用户显示更改？

【问题讨论】：

标签： angular typescript angular-ngmodel ngfor

【解决方案1】：

使用Object.assign 将您的对象深度复制到另一个变量并在取消函数中分配它

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

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

【讨论】：

【解决方案2】：

你可以换个角度看。仅在提交时更新。为此，您可以在*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;
  }
}

【讨论】：