У меня есть массив пользователей, и в HTML я использовал * ngFor , чтобы создать флажок для каждого элемента. У меня также есть @ Input assignAccountIds [] , который представляет выбранных по умолчанию пользователей.
Элемент флажка следующий:
<mat-checkbox
color="primary"
[disabled]="disableCurrentAccountCheckbox && account.id === currentAccountId"
[checked]="isAccountSelected(account)"
(change)="onSelectAccount($event, account)"
>
isAccountSelected метод проверки, существует ли пользователь в массиве выбранных элементов, чтобы узнать, нужно ли мне это проверять или нет, и вот реализация:
isAccountSelected(account: ClientAccount): boolean {
return (this.assignedAccountIds || []).includes(account.id);
}
На выходе change ,Реализация метода следующая:
onSelectAccount(event: MatCheckboxChange, account: ClientAccount): void {
if (
!event.checked &&
this.currentAccountId &&
account.id === this.currentAccountId
) {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: {
message: `You will not be able to see this inspection if you unassign yourself!`,
buttonColor: 'primary',
buttonLabel: 'Unassign',
},
position: {
right: '10px',
bottom: '10px',
},
maxWidth: '580px',
});
dialogRef
.afterClosed()
.pipe(untilDestroyed(this))
.subscribe(result => console.log(result));
} else {
this.selectionChange.emit({ id: account.id, checked: event.checked });
}
}
Итак, что я на самом деле пытаюсь сделать, это отобразить модальное подтверждение, когда вы хотите отменить выбор из списка. И только после того, как вы выберете Да или Нет из модального режима, флажок останется отмеченным или будет снят.