Снимите флажок с нажатия кнопки в Angular 7

Question

Снимите флажок с mat-list-option, тогда как я склеиваю данные из mat-таблицы.Данные были перечислены с помощью флажка из базы данных с использованием Angular 7. Когда выбранные элементы флажка были добавлены в mat-table, я должен удалить определенные элементы.

Здесь я должен снять флажок с отмеченного элемента, когда я удалилпредмет из мат-таблицы. нажмите здесь, чтобы лучше понять картинку

<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

Я предлагаю использовать сервис для обеспечения связи между компонентами .Таким образом, компонент Select Checklist может прослушивать изменения, которые испускает компонент Add New Loan Type.

Давайте установим основы, учитывая 3 элемента (или файлы).Вы получите идею:

ui.service.ts

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

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

add-new-loan-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);
    });
}