Mat Table - 如何 select 在单选按钮列中只有一个垫单选按钮

Question

当我们制作主要联系人详细信息然后将其保存显示在（图 1）上时，如何设置单选按钮

当我们点击“保存”按钮获得详细信息时显示（图 2）

然后显示在垫子上 table（图 3）我想在显示图像之前设置仅选择一个单选按钮以获取主要的 true

垫子上有垫单选按钮的代码 table

<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

处理每个单选按钮的点击以获取选定的单选按钮。要仅选中单选按钮列中的一个，请检查当前元素的 id 是否等于所选元素的 id [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>

并在 ts 中创建实例变量来保存当前被选为主要联系人的联系人。为避免错误，将其值设置为第一行数据。

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

现在是用于将 primaryContact 设置为所选单选按钮元素的处理函数

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

堆栈闪电战：https://stackblitz.com/edit/material-table-demo-wjpqsy

Mat Table - 如何 select 在单选按钮列中只有一个垫单选按钮

Mat Table -How to select only one mat radio button in column of radio buttons

angular-material

angular

ionic4

mat-table

angular8