前端单选框勾叉选项

在实习工作中遇到的一个需求：
检查事项有很多项内容，需要对检查内容进行是否达标的判断，用选择勾或者叉来实现，每一项中点了勾就不能点叉，点了叉就不能点勾，点了叉/勾可以取消。

前端框架用的是Angular。

.html：

<div style="float: right;" [ngClass]="{radio2: flag2List[i]}" (click)="choose2(i)"><Icon [type]="'cross-circle'"></Icon></div>
<div style="margin-right: 10px;float: right;" [ngClass]="{radio1: flagList[i]}" (click)="choose1(i)"><Icon [type]="'check-circle-o'"></Icon></div>

.css：

:host ::ng-deep{
	.am-icon-md {
        color: #777;
    }
    .radio1 .am-icon-md {
        color: green;
    }
    .radio2 .am-icon-md {
        color: red;
    }
}

.ts：

flagList = [];  // 勾
flag2List = []; // 叉
checkItems = {}; //用来存储每一行的选择勾叉情况

// 叉
n = [];
  choose2(i) {
    this.flag2List[i] = !this.flag2List[i];
    this.flagList[i] = false;
    this.checkItems[i] = false;
    
    if(this.checkItems[i] != true && this.n[i] == true) {
      this.checkItems[i] = null;
      this.n[i] = false;
    }
    this.n[i]=true;
  }
  
  // 勾
  m = [];
  choose1(i) {
    this.flagList[i] = !this.flagList[i];
    this.flag2List[i]  = false;
    this.checkItems[i] = true;

    if(this.checkItems[i] != false && this.m[i] == true) {
      this.checkItems[i] = null;
      this.m[i] = false;
    }
    this.m[i]=true;
  }