Question

<ul class="show-result">
    <li *ngFor="let staff of  allStaffs;">
        <div>
            <input type="checkbox" >{{ staff.perscode }} | {{ staff.personName }}
         </div>
    </li>
</ul>
<button class="btn btn-primary ripple" (click)="addSelectedStaff()">Add</button>

所有员工的价值都是

allStaffs = [{
               "perscode":23277,
               "personName":"Rahma Said Ali",
               "personCategoryCode":1011,
               "personCategoryName":"A.Pharmacist"
            },
            {
               "perscode":24825,
               "personName":"Zainab Abdul Baqi",
               "personCategoryCode":1011,
               "personCategoryName":"A.Pharmacist"
            } ]

如何在“添加”按钮上单击

获取所选复选框

我试过在angular2组件中添加此代码。我需要知道哪些都被检查了。这不起作用。

addSelectedStaff(){
   console.log("@@ selected options :"+this.selectedOptions);
}

 get selectedOptions() { // right now: ['1','3']
    return this.allStaffs
              .filter(opt => opt.perscode)
              .map(opt => opt.personName)
  }

需要获取整个选定的对象列表。

Answer 1

试试这种方式

  <ul class="show-result">
        <li *ngFor="let staff of  allStaffs;">
            <div>
                <input type="checkbox" value="{{staff.value}}"
                       [(ngModel)]="staff.perscode" >{{ staff.perscode }} | {{ staff.personName }}
             </div>
        </li>
    </ul>
    <button class="btn btn-primary ripple" (click)="addSelectedStaff()">Add</button>

组件。

addSelectedStaff() { 
    console.log(this.allStaffs
              .filter(staf => staf.perscode)
              .map(staf=> staf.value))
  }

获取角度2组件中的选中复选框值

1 个答案: