Angular - Таблица матов - Как выбрать только одну радиокнопку мат в столбце радиокнопок

Question

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

Показано (изображение 2), когда мы получаем детали по нажатию кнопки «Сохранить»

затем отображается в таблице матов (изображение 3). Я хочу установить выбранную только одну радиокнопку при получении основного истинного значения до показанное изображение

на матовом столе есть код для кнопки-переключателя Mat

<ng-container matColumnDef="primary" sticky>
                <th mat-header-cell *matHeaderCellDef>Primary </th>
                <td mat-cell *matCellDef="let element;">
                  <mat-radio-group> 
                    <mat-radio-button></mat-radio-button>
                  </mat-radio-group>
                </td>
              </ng-container>

Answer 1

Обрабатывать нажатие каждой радиокнопки, чтобы получить выбранную радиокнопку. Чтобы сделать только один отмеченный в столбце переключателей, проверьте, равен ли идентификатор текущего элемента выбранному идентификатору [checked]="primaryContact.id == element.id"

Измените шаблон переключателя на шаблон ниже

<ng-container matColumnDef="primary" >
            <th mat-header-cell *matHeaderCellDef>Primary </th>
            <td mat-cell *matCellDef="let element;">
                <mat-radio-button (click)="primaryClick(element)"
               [checked]="primaryContact.id == element.id" ></mat-radio-button>
            </td>
   </ng-container>

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

 primaryContact={primary:false,name:'snfjn',mobile:328754,email:'@fndn',...your fields};

, а теперь - функция-обработчик для установки primaryContact для выбранного элемента радиокнопки

  primaryClick(element){
        this.primaryContact=element;
        console.log(this.primaryContact.name)
      }

Stackblitz: https://stackblitz.com/edit/material-table-demo-wjpqsy