Радиокнопка углового материала проверена из Input ()

Question

У меня следующий HTML-файл

<mat-menu #appMenu="matMenu" class="mat-menu-panel-max-width-none">
<mat-radio-group #radioGroup>
<div *ngFor="let item of items, let i=index">
      <mat-radio-button color="primary"
       [value]="item.value"
       [checked]="item.selected"
       class="mat-menu-item"
       (change)="handleSelection(i)">
   {{item.name}}
  </mat-radio-button>
    </div>
</mat-radio-group>
 </mat-menu>

И файл TS.

  import { Component, EventEmitter, Input, Output } from '@angular/core';
  @Component({
    selector: 'item-selection',
    templateUrl: './item-selection.component.html',
 })
export class ItemsComponent {
 @Input() items: any;
 @Output() electionHandler = new EventEmitter();

 constructor() { }

 handleSelection(id) {
 electionHandler.emit({id:id});
 }
 }

Вот шаги, которые делает мой код:

1. Выберите пункт из меню.
2. Результат отправляется в хранилище ngrx.
3. новые Входные значения, элементы, устанавливаются в «item.selected = false» наблюдаемым селектором.
4. После этого я все еще вижу, что пункт выбран. Намерение - сбросить все элементы, не выбранные после каждого действия.

Что не так?

Answer 1

Вместо того, чтобы пытаться вручную управлять «проверенным» состоянием переключателя. Я бы лично попытался использовать встроенную функциональность HTML и присвоить радиостанциям одно и то же значение «name» с тем же значением, или, если вы используете Reactive Forms, свойство formControlName также выполнит то же самое. И они «проверяют» и «снимают галочку» с себя, когда пользователь выбирает из формы.