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

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

  •  1
  • sander  · 技术社区  · 6 年前

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

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

    constructor(){
      this.unChangedObject = Object.assign({},this.object  )
    }
    
    cancel(){
       this.object = this.unChangedObject;
    }
    
        2
  •  0
  •   Poul Kruijt    6 年前

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