4

我将 SelectionModel 用于 mat-checkbox 并在每次单击时调用一个函数：

 toggleSelection(row) {
    this.selection.toggle(row);
    console.log("Selection");
    console.log("this", this.selection.selected);
    this.selection.selected.forEach(selected => {
      this.masterPossibleActions = this.masterPossibleActions.filter(action => selected.possibleActions == action);
    });
    console.log(":MAster",this.masterPossibleActions)
  }

this.selection.selected 正在返回代表选定行的对象数组。每个对象都有一个名为 possibleActions 的属性。我希望 masterPossibleActions 数组成为所有选定行之间常见的可能操作的列表。

可能的Action对象类：

class ActionObject {
  key: string;
  value: string;
  constructor(key: string, value: string) {
    this.key = key;
    this.value = value;
  }
}

切换功能：

 <td mat-cell *matCellDef="let row">
          <mat-checkbox appClickStopPropagation (change)="toggleSelection(row)" class="custom-checkbox"
            [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
          </mat-checkbox>
        </td>

this.selection 是：

  selection = new SelectionModel<Enrolment>(true, []);

报名对象：

 export class Enrolment {
  id: string;
  user: any;
  enrollable: any;
  time_created: string;
  status: string;
  possibleActions: Array<ActionObject> = [];

  preparePossibleActions() {
    this.possibleActions = [];
    this.possibleActions.push(new ActionObject("DELETE", "Delete"));
    switch (this.status) {
      case "PENDING":
        this.possibleActions.push(new ActionObject("REMOVE", "Reject"));
        this.possibleActions.push(new ActionObject("APPROVE", "Approve"));
        break;
      case "REJECTED":
      case "CANCELLED":
      case "WITHDRAWN":
        break;
      case "APPROVED":
      case "WITHDRAW_PENDING":
      case "COMPLETED":
        this.possibleActions.push(new ActionObject("REMOVE", "Withdraw"));
        break;
      default:
        break;
    }
  }
  constructor(rawObj: any) {
    this.id = rawObj.id;
    this.user = rawObj.user;
    this.enrollable = rawObj.enrollable;
    this.time_created = rawObj.time_created;
    this.status = rawObj.status;
    this.preparePossibleActions();
  }
}
4

1 回答 1

2

我假设您要解决的问题是如何正确过滤。你可以试试：

// masterPossibleActions is combined actions from all rows (array)
// this.selection.selected is all selected rows (need to call possibleActions)
let actions = this.selection.selected.map(selectedRow => selectedRow.possibleActions)
// initialize masterPossibleActions with first element -> can only shrink not grow because there wont be any actions that aren't in first element action's and common between all of them
this.masterPossibleActions = actions[0]
// filter the initial value to fit only common actions
this.masterPossibleActions = this.masterPossibleActions.filter(action => {
  let isCommon = true
  actions.forEach(rowActions => {
    if (rowActions.indexOf(action) < 0 ) {
      isCommon = false
    }
  })
  return isCommon
})

最终功能：

 toggleSelection(row) {
    this.selection.toggle(row);
    this.masterPossibleActions = actions[0]
    this.masterPossibleActions = this.masterPossibleActions.filter(action => {
      let isCommon = true
      actions.forEach(rowActions => {
        if (rowActions.indexOf(action) < 0 ) {
           isCommon = false
        }
      })
      return isCommon
    })
  }
于 2019-08-30T11:05:27.163 回答