Angular如何为输入类型radio配置单独的name属性，其中多个输入在循环中初始化

Question

我有多个无线电输入在模板循环中初始化，我有问题，因为我使用的是formControlName，因为输入类型名称和ngModel，我相信。因为多输入初始化的输入类型无线电的名称属性相同，我的ngModel爆炸了。我需要找到方法为循环中的每个输入或其他一些机制的name属性赋予唯一值。

我有referenceKey值，每个输入都有唯一值，但由于formControlName，它可能不起作用???

我的问题是如何在循环中使用唯一名称属性进行输入

模板

 <div class="grid-row" *ngFor="let opt of question.options">
                <div class="flex-item">{{opt.subQuestionTitle}}</div>
                <div *ngFor="let sub_opt of opt.subOption">
                    <label class="flex-item">
                        <input [name]="sub_opt.name" type="radio" [formControlName]="question.key" [value]="sub_opt.key" [(ngModel)]="opt.selectedOption"> <span>{{sub_opt.selectedOptionState}}</span>
                    </label>     
                </div>
  </div>

成分

 else  if(questionElementType=="matrixRadio")
 {
   let _martrixRadio = new MatrixQuestion ({
     consultationId: questionsList[key].consultationId,
     questionId: questionsList[key].questionId,
     questionElementType: questionsList[key].questionElementType[0].title,             
     questionType: questionsList[key].questionType,
     title:questionsList[key].title,
     displayId: questionsList[key].displayId,
     key: questionsList[key].questionId,     

     label: questionsList[key].title,
     order: 9,
     options:  questionsList[key].subQuestions.map(function(item){
       return {"key": item.questionDetail.questionId, "subQuestionTitle": item.questionDetail.title, "selectedOption":this.getSubAnswer(questionsList[key].answer, item.questionDetail.questionId) ,subOption:                                                                   
                      item.preDefineAnswerOptions.map(function(subItem){
                      return {"key":subItem.preDefineAnswerOptionId, "value":subItem.text ,"displayOrder":subItem.displayOrder, "selectedOptionState": subItem.preDefineAnswerOptionId ==this.getSubAnswer(questionsList[key].answer, item.questionDetail.questionId)? "true" :"false"}
                     }.bind(this))             
             }
           }.bind(this)), 
   });

矩阵类

export class MatrixQuestion extends QuestionBase<string> {
controlType = 'matrixRadio';
options: {subQuestionTitle: string; name:string, key: string, value: string}[] = [];

 constructor(options: {} = {}) {
 super(options);
 this.options = options['options'] || [];
  }
}

Answer 1

 <div class="grid-row" *ngFor="let opt of question.options ; let i = index">
                <div class="flex-item">{{opt.subQuestionTitle}}</div>
                <div *ngFor="let sub_opt of opt.subOption ; let j = index">
                    <label class="flex-item">
                        <input [name]="sub_opt.name+'_'+i+'_'+j" type="radio" [formControlName]="question.key" [value]="sub_opt.key" [(ngModel)]="opt.selectedOption"> <span>{{sub_opt.selectedOptionState}}</span>
                    </label>     
                </div>
  </div>

您可以在for循环中设置索引变量，并将它们用作名称的sufux。