Я использую Angular, который имеет модальный диалог, который затем имеет флажки. Я не могу заставить флажки помнить их выбор

Question

Я использую Angular, который имеет модальное диалоговое окно, которое затем имеет флажки. Я пытаюсь заставить флажки помнить выбор, но не могу этого сделать. Вот мой шаблон HTML ниже: я не хочу включать jQuery в качестве другого пакета в мои модули. Кто-нибудь может помочь? Дайте мне знать, если вам нужен какой-то другой фрагмент кода из моего проекта. Я просто пытаюсь быть кратким и точным

<mat-checkbox (change)="AllItemsChange($event) "[(checked)]="selectAllItems">{{this['groupType'] | pluralize}}</mat-checkbox>
      </mat-header-cell>
      <mat-cell *matCellDef="let group"> 
        <mat-checkbox [(ngModel)]=group.selected>{{group.name}}</mat-checkbox>

Answer 1

Следующий подход может привести вас туда. Я не могу написать точный код, так как мне нужно было бы настроить приложение Angular, но если вы знаете директивы @Input () / @ Output (), я думаю, вы можете это сделать.

Есть два компоненты здесь.

1. Ваша текущая страница - вам необходимо создать свойство (propA), в котором будет храниться значение выбора вашего флажка на модальной странице.
2. Ваша модальная страница - здесь Опять же, вам нужно иметь вход (это свойство связано с вашим флажком ngModel) и свойство вывода.

Когда вы нажимаете кнопку модального открытия на главной странице, передайте это значение (propA ) к модальным данным, так как изначально это будет false, ваш модальный флажок примет свое значение и не будет проверяться. Теперь, когда вы проверяете или снова снимаете флажок, ваше выходное свойство (которое в основном похоже на события - нажатие кнопки, фокус) сработает и вернет значение check / uncheck обратно вашему родительскому компоненту и будет сохранено в propA.

Теперь, когда пользователь закрывает модальное окно и снова пытается его открыть, propA будет иметь значение check / uncheck и ваш модальный флажок будет вести себя так, как задумано.