Angular如何为输入类型无线电配置单独的名称属性，其中多个输入在循环中初始化答案

【问题标题】：Angular how to configure separate name property for input type radio where multiple inputs initialise in loopAngular如何为输入类型无线电配置单独的名称属性，其中多个输入在循环中初始化
【发布时间】：2018-09-26 05:18:52
【问题描述】：

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

我有 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'] || [];
  }
}

【问题讨论】：

您可以尝试使用question.key 和sub_opt.name 的串联，这样名称应该是唯一的并且不会与formControlName 冲突

标签： angular

【解决方案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 循环中设置索引变量，并将它们用作您名字的后缀。

【讨论】：