代码之家 › 专栏 › 技术社区 › sander

有没有办法把ngmodel和ngfor一起使用?

ngfor angular-ngmodel typescript angular

1

sander · 技术社区 · 7 年前

当用户单击“取消”按钮时,我想重置复选框的值。有没有一种方法可以将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 回复 | 直到 7 年前

1

0

Sachila Ranawaka 7 年前

使用 Object.assign 并在取消功能中分配

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

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

2

0

Poul Kruijt 7 年前

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