angular+ionic 单选框的实现

需求: 从后端传来List<Map<String,Object>>集合，需要遍历展示在界面上，要求如果zt为0表示没有评价，单选框可以操作；如果zt为 1表示已经评价，需要将选定结果展示出来，不能进行更改
结构如下:

// 单选
[{  
    zt: "1"
	zbid: "218",     
	zblx: "1",   // 1--单选     4--问答
	zbmc: "仪态",
	pjjg: "A",    // 选择的结果
	zbxx:[   // 五个选项
		   ["xxbm":"A","xxmc":"极好"],
		   ["xxbm":"B","xxmc":"良好"],
	       ["xxbm":"C","xxmc":"一般"],
	       ["xxbm":"D","xxmc":"较差"],
	       ["xxbm":"E","xxmc":"极差"],
		]
   },
{
...
},
...
]

解决思路:

1. 对于zt="1"的不能再更改,本来想实现单选框或者文本区域不能动,未实现,于是在zt="1"的时候隐藏更改按钮使数据不能提交
2. 选项的展示如下,zt/zblx/zbmc等的展示容易实现,如下:

<ion-content>
 <div class="box-y gwfxsh_item" *ngFor="let item of pjjgArray;let i=index">
   <!-- 单选 -->

   <div *ngIf="item['zblx']=='1'">
     <label>{{ item['zbid'] }}</label>
     <label class="label_name">{{i+1}} {{item['zbmc']}}</label>
     <label>({{ item['zbdf']}}分)</label>
     <label>{{ daArray[i].zbvalue }}</label>
     <ion-list no-lines radio-group no-margin no-padding [(ngModel)]="daArray[i].zbvalue">
       <ion-item *ngFor="let it of item['zbxx']">
         <ion-label>{{ it['xxbm']}} {{it['xxmc']}}</ion-label>
         <ion-radio item-end [value]="it['xxbm']"></ion-radio>
       </ion-item>
     </ion-list>
   </div>

   <!-- 回答 -->
   <div *ngIf="item['zblx']=='4'">
     <label>{{ item['zbid'] }}</label>
     <ion-list no-margin no-padding no-lines>
       <label class="label_name">{{i+1}} {{item['zbmc']}}</label>
       <labeL>({{ item['zbdf']}}分)</labeL>
       <label>{{ daArray[i].zbvalue }}</label>
       <ion-textarea style="border: 1px solid #DDDDDD;"  [(ngModel)]="daArray[i].zbvalue"></ion-textarea>
     </ion-list>
   </div>
 </div>
</ion-content>

3. 对于在这个过程中需要发生变化的选中的选项,创建并加入到数组中,实现双向绑定,注意ngModel的位置

this.daArray = [];   // 注意这里要进行初始化,否则是不可以往里面传值的
   // this.daArray.push("a", "b", "c");
   // 遍历每一条评价记录,
   this.pjjgArray.map((pj) => {
     this.daArray.push({
       // pid: this.pjid,      // 问题的ID还是评价的ID?
       zblx: pj["zblx"],
       zbid: pj["zbid"],
       zbmc: pj["zbmc"],
       zbvalue: pj["pjjg"],
     });
   });

效果图: