Question

我有一个主复选框，其ngModel值为[(ngModel)]="formModel.acknowledged1，而在组件上，它设置为false，如

formModel = {
  acknowledged1 :false
}

我有一个包含n行的表，每行都有一个复选框，其中ngModel为[(ngModel)]="formModel.acknowledged所以当我点击主复选框时，表上的所有复选框都被选中，然后我的函数deleterow被执行，但是我想

如果我只选择表格行中的单选复选框，则应执行其他一些功能。请参阅下文以明确我的问题。 html -

<p>
<checkbox  [(ngModel)]="formModel.acknowledged1"  id="box1"   name="acknowledgement1"></checkbox></p>

<tbody  infiniteScroll
             [infiniteScrollDistance]="2"
             [infiniteScrollThrottle]="300"
             (scrolled)="onScroll()"
             [scrollWindow]="false">


<ng-container *ngFor="let data of allData>
                   <tr class= "row-break">             
                    <checkbox    [(ngModel)]="formModel.acknowledged1" id="box2"  name="acknowledgement2">
                     </checkbox>     
                       <td>
                         <a>{{data.Code}}</a>
                       </td>
                       <td>
                         {{data.Description}}
                       </td>
                    </tr>
               </ng-container>
           </tbody>

Component.ts -

export class CodesComponent implements OnInit{                                
  formModel = {
    acknowledged1 :false
  }                              
  ngOnInit (){ 
    deleteallrow(){
       if(this.formModel.acknowledged1==true){
          this.reasonCodesActions.deleterow();
        }

    deletesinglerow(){ }
  }

Answer 1

您需要为每个复选框创建一个包含单个布尔值的数组。

component.html

...

<ng-container *ngFor="let data of allData; let i = index;">
  <tr class="row-break">
    <checkbox
      (change)="changeBox(i)"
      [checked]="checkboxes[i]"
      id="box2"
      name="acknowledgement2"
    ></checkbox>

...
  </tr>
</ng-container>

component.ts

...

checkboxes = [];

changeBox(index) {
  if (this.checkboxes[index]) {
    return this.checkboxes[index] = !this.checkboxes[index];
  }

  return this.checkboxes[index] = true;
}

...

代码中的某些内容可能有误，我暂时不使用Angular，但这是我上一次使用它时使用的逻辑！

Angular4 - 如果未选中所有复选框，则执行函数

1 个答案: