使用 Angular 在 json 对象中创建无线电组

Question

我需要基于单选名称的单选按钮的动态数量来创建一个对象例如，我期待这样的输出

预期输出

[
 {Q1: '1'},
 {Q2: '3'} 
];

我尝试使用 [(ngModel)]

但是，当我点击任何单选按钮时，总是选择最后一个单选按钮，并且该值永远不会分配给 ngModel。

如果我删除 ngModel，收音机工作正常，但是，未设置值，只能选择值。这里可以做什么？

app.component.html

<div *ngFor="let question of questions">
<ul>
    <li>
      <span>{{question.id}}.{{question.name}}</span>
      <div *ngFor="let radio of radioGroup">
         <input id="{{question.radioName}}" 
                class="radio-button" 
                [value]='radio.id' 
                type="radio" 
                name="radio"/>
          <div class="radio-tile">
             <label for="{{question.radioName}}" 
                    class="radio-tile-label">
                      {{radio.name}}
             </label>
           </div>
         </div>
        </li>
      </ul>
   </div>

app.component.ts

export class AppComponent {

 questions;
 radioGroup;

 ngOnInit() {
  this.questions =[
   {
    id: '1', 
    name: 'What is your name?', 
    radioName: 'Q1',
    modelName: 'question1'
  },
  { 
    id: '2', 
    name: 'What is your role in your organization?',  
    radioName: 'Q2',
    modelName: 'question2' 
  }
 ];


 this.radioGroup = [
   {id: '1', name: 'Strongly Disagree'},
   {id: '2', name: 'Disagree'},
   {id: '3', name: 'Neutral'},
   {id: '4', name: 'Agree'},
   {id: '5', name: 'Strongly Agree'},
  ];
 }
}

Answer 1

一种方法（无需对代码进行最小更改）是使用 change 事件，如下图所示。

更好的方法是研究 Angular 反应形式。

记下：

在模板中 - (change)="selected(question.radioName, radio.id)"
在代码中 - selected(qName, reqId) { this.answers[qName] = reqId; }

change 事件将在无线电更改时触发，您可以在其中通过 selected 方法更新您的模型。

然后添加提交，如有必要，enabled/disabled 检查应该通过评估 answers 字段直接进行。

<div *ngFor="let question of questions">
  <ul>
    <li>
      <span>{{question.id}}.{{question.name}}</span>
      <div *ngFor="let radio of radioGroup">
        <input id="{{question.radioName}}"
               class="radio-button"
               [value]='radio.id'
               type="radio"
               name="radio" (change)="selected(question.radioName, radio.id)"/>
        <div class="radio-tile">
          <label for="{{question.radioName}}"
                 class="radio-tile-label">
            {{radio.name}}
          </label>
        </div>
      </div>
    </li>
  </ul>
</div>
<div>{{ answers | json }}</div>


export class AppComponent implements OnInit {

  questions;
  radioGroup;

  answers = {};

  ngOnInit() {
    this.questions = [
      {
        id: '1',
        name: 'What is your name?',
        radioName: 'Q1',
        modelName: 'question1'
      },
      {
        id: '2',
        name: 'What is your role in your organization?',
        radioName: 'Q2',
        modelName: 'question2'
      }
    ];


    this.radioGroup = [
      {id: '1', name: 'Strongly Disagree'},
      {id: '2', name: 'Disagree'},
      {id: '3', name: 'Neutral'},
      {id: '4', name: 'Agree'},
      {id: '5', name: 'Strongly Agree'},
    ];
  }

  selected(qName, reqId) {
    this.answers[qName] = reqId;
  }
}

使用 Angular 在 json 对象中创建无线电组

Creating a radio group into json object with Angular

radio-group

angular