如何实现mat-grid-tile组件类似单选按钮的可选中功能？

1. 组件类新增选中状态变量 #

在对应ts组件文件中定义存储选中项的变量和切换选中状态的方法：

// 存储当前选中的套餐
selectedPackage: any = null;

// 点击切换选中项
selectPackage(pkg: any) {
  this.selectedPackage = pkg;
}

如果需要默认选中某一项，直接在ngOnInit生命周期中给selectedPackage赋值对应套餐对象即可。

2. 修改模板代码绑定交互逻辑 #

给mat-grid-tile新增点击事件、动态样式判断：

<mat-grid-list cols="3" rowHeight="1:1" [gutterSize]="'30px'" style="width:90%">
  <mat-grid-tile 
    *ngFor="let package of packageList" 
    class="package-box"
    (click)="selectPackage(package)"
    [ngClass]="{'selected-tile': selectedPackage === package}"
  >
    <div style="display: flex; flex-direction:column; text-align: center;">
      <div>
        <h2>
          {{package.package_name}}
        </h2>
      </div>
      <div>
        <p>${{package.mrp_price}}</p>
      </div>
    </div>
  </mat-grid-tile>
</mat-grid-list>

注：如果你的package对象有唯一id字段，也可以用selectedPackage?.id === package.id做判断，稳定性更高。

3. 新增选中状态样式 #

在组件的css/scss文件中添加选中效果样式，可根据你的设计需求调整：

.package-box {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid #eee;
  border-radius: 8px;
}

/* 选中状态样式 */
.selected-tile {
  border-color: #2196f3;
  background-color: #e3f2fd;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

后续需要获取选中值时，直接读取selectedPackage变量即可。

内容的提问来源于stack exchange，提问作者naresh mandloi