Вложенная множественная циновка-радио-кнопка не работает должным образом

Question

У меня есть mat-radio-group, в которой больше mat-radio-group. Я создал здесь стекаблиц https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts

В примере, когда страница загружается, я хочу показать радио-опцию 'бухгалтерской книги', выбранную вместе со значением1 ниже ее, выбранным по умолчанию. Если я установил переключатель «Доступен», мне нужно выбрать «Значение 1» ниже «Доступен».

Код работает нормально для всех случаев, кроме первого случая, в котором я должен показать значение по умолчанию. выбор.

Может кто-нибудь указать, где я иду не так?

Answer 1

По какой-то причине вложенные радиогруппы / кнопки нуждаются во втором цикле обновления, чтобы правильно обновить состояние по умолчанию. Одним из способов достижения этого является добавление времени ожидания 0 мс в одну из ловушек жизненного цикла перед вызовом onRadioFilterChanged() со значением по умолчанию. Самый ранний хук, в котором я нашел это, - ngOnInit(). Вам также необходимо установить все проверенные свойства на false, чтобы изменение состояния могло произойти, вызывая обновление.

Итак, добавив

ngOnInit() {
    setTimeout(_=> this.onRadioFilterChanged('L'), 0);
}

и установив checked: falseтакже над первыми флажками в каждой группе будет работать, как показано в этом обновленном stackblitz: https://stackblitz.com/edit/angular-mdgy7x-dcijkt?file=app%2Fradio-overview-example.ts

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

Answer 2

Я достиг того, что хочу, используя следующий код. В основном я создал отдельные переключатели для родительского и дочернего элементов, и с каждым из них связан ngModel. Затем я манипулирую ngModel на основе взаимодействия с пользователем. Ниже приведен стек стека, https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts

Answer 3

Сначала добавьте вызов ngOnInit:

ngOnInit(){
    this.onRadioFilterChanged("L");
}

и создайте переменную, чтобы сохранить значение регистра и доступным, как для радио. Затем используйте это значение в onRadioFilterChanged.

Еще одна вещь, которая не работает, - это когда вы выбираете одну из подрадиокнопок.