通过取消选中从列表中删除复选框值

时间:2019-06-21 07:47:14

标签: javascript angular typescript

我有一个ControllModel[]的列表,而我有一个Action的列表,然后在复选框中显示。

   export interface Controllermodel {
      controllerName:string;
      controllerDisplayName:string;
      ControllerId:string;
      actionsVM:Actionmodel[];
}

export interface Actionmodel {
      displayName:string;
      name:string;
      metaData:string;
}

当复选框为checked时,它将在列表中添加值,但是我需要在未选中复选框时从列表中删除值。

我该怎么做??

Sample Code

在HTML中:

    <div class="panel-body">
  <div *ngFor="let action of controller.actionsVM" class="col-auto my-1">
    <div class="custom-control custom-checkbox mr-sm-2">
      <input type="checkbox" (change)="onChange($event,controller.controllerName,action.name)" class="custom-control-input">
      <label class="custom-control-label" for="customControlAutosizing">{{action.displayName}}</label>
    </div>
  </div>
</div>

在ts文件中:

   onChange(event,controllerName:string,actionName:string)
{
  var test = this.PushAccessModel.find(x => x.controllerName === controllerName);
  if(test){
    test.actionsName.push({name: actionName});
  }else {
    this.PushAccessModel.push({
      controllerName: controllerName,
      actionsName: [{
        name: actionName
      }]
    });
  }

  console.log(this.PushAccessModel)
}

0 个答案:

没有答案