Question

目前，我已经创建了一个表单，该表单允许用户创建一个图层（它只是最终传单层的名称）。每当执行此操作时，值将显示为true或false，但是当我添加另一张幻灯片切换时，它们两个都将变为true或false。我不确定在这种情况下如何应用索引。

html

<form #f="ngForm" (ngSubmit)="addALayer(f)">
    <mat-form-field>
      <input matInput placeholder="Layer Name" ngModel name="layername">
    </mat-form-field>
    <button mat-icon-button 
            color="accent"
      ><mat-icon>add_box</mat-icon></button>
</form>

</div>
  <div class="layerGroupings">
   <div *ngFor="let layer of layers; let i = index">
    <mat-slide-toggle [(ngModel)]="layeron"></mat-slide-toggle> {{layer}} {{ layeron }}
   </div>
  </div>
</div>

component.ts

layers = [];
layeron: boolean;


addALayer(form: NgForm) {
this.layerName = form.value.layername;
this.layers.push(this.layerName);
}

还有哪个生命周期挂钩将捕获此更改。如果我在ngOnInit甚至ngOnChanges中添加console.log（this.layeron），则在控制台中没有任何注册...

谢谢！

Answer 1

尝试一下

<div class="layerGroupings">
   <div *ngFor="let layer of layers; let i = index">
    <mat-slide-toggle [(ngModel)]="layeron[i]"></mat-slide-toggle> {{layer}} {{ layeron }}
   </div>
  </div>

示例：https://stackblitz.com/edit/angular-cazpib

数据绑定到* ngFor内部的mat-slide-toggle值

1 个答案: