Как снять все флажки, когда модал закрыт в angular? - PullRequest
Новая
       7

Как снять все флажки, когда модал закрыт в angular?

0 голосов
/ 21 апреля 2020

Итак, у меня есть angular 8 приложение.

И у меня есть несколько флажков. У меня также есть кнопка, которая вызывает другой компонент (диалог), где вы можете сделать выбор на некоторых данных. но если диалог закрывается, то флажки должны быть сняты.

Итак, это шаблон с флажком:

list.component 

  <mat-checkbox
            (click)="$event.stopPropagation()"
            (change)="$event ? onCheckboxChange($event, row) : null"
            [checked]="selection.isSelected(row)"
          >
          </mat-checkbox>

list.ts: 

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

onCheckboxChange(event, row) {
    const isChecked = event.checked;
    const particpantId = row.participantId;
    if (isChecked) {
      this.participantIds.push(particpantId);
    } else {
      this.participantIds = this.participantIds.filter(id => id !== particpantId);
    }
    this.selection.toggle(row);
    this.selectedParticipantsService.updateParticipantIdsList(this.participantIds);
  }

, и это другой компонент:

EcheqSelectorComponent.ts: 

 .subscribe(
          () => {
            this.dialog.close();
          //So what I have to fill in here so that all the checkboxes in the list.component will be unchecked



            this.snackBar.open('De vcheq(s) zijn verstuurd', 'Ok');
          },
          error => {
            console.error('Server error when assigning vcheq', error);
            this.snackBar.open('Er ging iets mis bij het opsturen, probeer het later nog een keer', 'Ok');
            this.dialog.close();
          }
        );

Так что мне нужно изменить, чтобы снять флажки, когда модальное закрыто?

Спасибо

Итак, это данные в компоненте list.ts: 

const numSelected = this.selection.selected.length;

, которые я должен использовать в компоненте eceq-selector.

Но как это сделать?

Поэтому я пытаюсь сделать это следующим образом:

в echeq-selector: 

 constructor(
    @Inject(ListComponent)
    private listComponent: ListComponent,
}

и затем так: 

 this.listComponent.selection.clear();

Но тогда я получаю эту ошибку: 

core.js:12584 ERROR Error: Uncaught (in promise): Error: Can't resolve all parameters for EcheqSelectorComponent: (?, [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]).

1 Ответ

0 голосов
/ 22 апреля 2020

Если вы используете диалоги материалов, у вас есть метод dialog.afterClosed(), который вы можете использовать при закрытии диалогового окна. Это дает вам возможность отписаться от материала, очистить формы и делать все, что вы хотите. Это довольно круто, вот ссылка, так что вы можете точно увидеть, как его использовать, а также все, что вы можете с ним сделать.

https://material.angular.io/components/dialog/overview

Я использую это как сумасшествие в моих проектах для очистки форм, сброса состояния и всех видов удивительности.

...