取消选中Angular 7中按钮单击的复选框

Question

取消选中来自mat-list-option的复选框，而我从mat-table拼接数据。使用Angular 7从数据库中列出了带有复选框的数据。当在mat-table中添加了选定的复选框项时，我必须删除特定的项。

当我从垫子桌子上删除该项目时，我必须取消选中该项目。 click here for image to understand better

<form #ChoicesForm="ngForm" (ngSubmit)="onSubmitLoanTypeCheckList()">
<div>
          <mat-selection-list  #cList >
            <mat-list-option *ngFor="let cLists of loanTypeCheckList" [value]="cLists" [checkboxPosition]="before" id="{{cLists.id}}" (selectionChange)="onSelection($event, cList.selectedOptions.selected)">
              {{cLists.name}}
            </mat-list-option>
          </mat-selection-list>
        </div>    
<button class="btn-margin-top" mat-raised-button type="submit" color="accent" [disabled]="!toogleBool">Add</button>
        <button mat-raised-button type="button" (click)="btnLoanTypeCheckListCancel()">Cancel</button>

</form> 

     

export class LoanTypesComponent
{
   loanTypeCheckList: CheckListDto[] = new Array<CheckListDto>();
 selectedOptions : CheckListDto[] = new Array<CheckListDto>();
constructor(){

 this.checkListClient.getListOfCheckList(this.accountId).subscribe(res => {
      this.loanTypeCheckList = res.data;        
    });
}

onSelection(e, v) {
    if (v.length > 0) {
      this.toogleBool = true;      
      this.selectedOptions = new Array<CheckListDto>();
      
      for (let a of v) {        
        this.selectedOptions.push({          
          accountId : a.value.accountId, 
          accountName: a.value.accountName,
          createdDate:a.value.createdDate,
          disabled:a.value.disabled,          
          id:a.value.id.toString(),
          init : a.value.init,
          modifiedDate:a.value.modifiedDate,          
          name:a.value.name,
          toJSON :a.value.toJSON
        });
      }     
    }
    else {
      this.toogleBool = false;
    }    
  }

onSubmitLoanTypeCheckList() {    
this.loanCheckList = new MatTableDataSource<CheckListDto>(this.selectedOptions);    
  }


deleteCheckList(checkList: CheckListDto) {

    const deleteRow = this.loanCheckList.data.find(a=> a.id == checkList.id);
    const index = this.loanCheckList.data.indexOf(deleteRow);   

    if (index !== -1) {
        this.loanCheckList.data.splice(index, 1);        
        this.loanCheckList = new MatTableDataSource<CheckListDto>(this.loanCheckList.data); 
    }  
  }

}

Answer 1

我的建议是使用服务来提供组件之间的通信。这样，“选择清单”组件可以侦听“添加新贷款类型”组件发出的更改。

让我们设置3个元素（或文件）的基础知识。你会得到的想法：

ui.service.ts

private deleteItemSubject: Subject<any> = new Subject<any>();
deleteItem$: Observable<any> = this.deleteItemSubject.asObservable();

deleteItem(id) {
    this.deleteItemSubject.next(id);
}

添加新贷type.component.ts

deleteItem(item) {
    // Your logic here
    // ...
    // Use the service to emit this.
    this.uiService.deleteItem(item.id)
}

select-checklist.component.ts

// Call this method at the very beginning (e.g. constructor, ngOnInit)
listenToDeletedItems() {
    this.uiService.deleteItem$.takeUntil(this.destroyed$).subscribe(id => {
        this.unCheckItem(id);
    });
}