Question

我有一个如下列表：

 rows: any[] = [{"id":"1721079361", "type":"0002", "number":"2100074912"},
                {"id":"1721079363", "type":"0003", "number":"2100074913"},
                {"id":"1721079363", "type":"0004", "number":"2100074914"},
                {"id":"1721079361", "type":"0001", "number":"2100074911"}];

我想用复选框在桌子上装载。

用户仅选择具有相同ID的项目。这是HTML

<p-table [value]="rows">
    <ng-template pTemplate="header">
        <tr>
           <td>
                </td>
            <th>ID</th>
            <th>Type</th>
            <th>Number</th>
        </tr>
    </ng-template>
      <ng-template   pTemplate="body" let-row>
         <tr [pSelectableRow]="row">
           <td>
                <p-checkbox [(ngModel)]="selectedValues" value="{{row.id}}"></p-checkbox>
            </td>
            <td>{{row.id}}</td>
            <td>{{row.type}}</td>
            <td>{{row.number}}</td>
        </tr>
    </ng-template>
</p-table>

Test : {{selectedValues}}

但是直到现在，我仍无法找到解决方案。请咨询 https://stackblitz.com/edit/angular-8ddptg

Answer 1

您可以使用disable属性，并在任何复选框的change事件发生时动态地将其与行值绑定。

component.html

<p-checkbox [disabled]="row && row.isDisable" [(ngModel)]="selectedValues" value={{row.id}}" (onChange)="updateList(selectedValues)" ></p-checkbox>

component.ts

updateList(val){
    if(val.length === 0){
      for(let i = 0; i<this.rows.length ;i++){
        this.rows[i]['isDisable'] = false;
      }
    }else{
       let id = val[0];
        for(let i = 0; i<this.rows.length ;i++){
          if(this.rows[i]['id']!== id){
            this.rows[i]['isDisable'] = true;
          }
        }
    }

  }

这里是working code

希望这可以解决您的目的！

处理具有相同组的选择p复选框

1 个答案: