0

我有一个主复选框，其ngModel值为 as [(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>

组件.ts -

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

    deletesinglerow(){ }
  }
4

1 回答 1

1

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

组件.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>

组件.ts

...

checkboxes = [];

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

  return this.checkboxes[index] = true;
}

...

代码中的某些内容可能是错误的，我有一段时间没有使用 Angular，但这是我上次使用的逻辑！

于 2018-03-13T14:49:03.317 回答