Обработка радиокнопок в Angular 6
У меня есть список вопросов, приведенный ниже.
public questionList = [
{
question:{
id: "Q1",
query:"query 1"
},
options:[
{
id: "opt1",
text: "Q1_opt1"
},
{
id: "opt2",
text: "Q1_opt2"
}
],
selected:{
id:"",
text:""
}
},
{
question:{
id: "Q2",
query:"query 2"
},
options:[
{
id: "opt1",
text: "Q2_opt1"
},
{
id: "opt2",
text: "Q2_opt2"
}
],
selected:{
id:"",
text:""
}
}
];
Я намерен перечислить вопросы вместе с параметрами в виде переключателей. Каждый раз, когда кто-то выбирает вариант, идентификатор выбранного варианта должен быть назначен «selected.id», связанному с этим вопросом.
Ниже приводится часть HTML.
<div *ngFor = "let question of questionList">
{{question.question.query}}
<br>
<div *ngFor = "let option of question.options">
<input type = "radio" value = "{{option.id}}" [(ngModel)] = "question.selected.id">{{option.text}}
<br>
</div>
{{question.selected | json}}
<br>
<br>
</div>
Но когда я выбираю любой вариант для первого вопроса, вариант для второго вопроса также выбирается, и наоборот.
что бы здесь пошло не так?
Ответы 3
Вам не хватает атрибута название на радио. Имя должно быть уникальным для одного набора параметров.
В вашем случае использования, когда радиокнопки генерируются динамически, вы можете использовать индекс цикла, чтобы установить name следующим образом:
<div *ngFor = "let question of questionList; let i = index">
{{question.question.query}}
<br>
<div *ngFor = "let option of question.options; let j = index">
<input type = "radio" [value] = "option?.id" [(ngModel)] = "question.selected.id" [name]='"abc"+i+j'>{{option.text}}
<br>
</div>
{{question.selected | json}}
</div>
Рабочий пример
я думаю, что "" abc "+ i" более чем достаточно ... мои переключатели - да / нет ... я хочу, чтобы за раз выбирался только один.
да "abc"+i" должен работать. Я не понял вашего следующего вопроса, не могли бы вы объяснить поподробнее?
в реальном приложении "option" более сложный, чем приведенный здесь .. у него есть детали, такие как вес ... когда я отправляю отправленный ответ на бэкэнд-сервер, я хотел бы добавить эти детали также в "selected". например .. в этом случае вы можете видеть, что поле «текст» отсутствует в «выбранном». как мне его заполнить ?? какой-нибудь простой способ от углового?
Назначьте имя переключателю
<div *ngFor = "let question of questionList; let i = index">
{{question.question.query}}
<br>
<div *ngFor = "let option of question.options">
<input type = "radio" [name]= "i" value = "{{option.id}}" [(ngModel)] = "question.selected.id">{{option.text}}
<br>
</div>
{{question.selected | json}}
<br>
<br>
</div>
Это не должно работать, вы пробовали это? Поскольку question.id для опции отличается, но имя должно быть таким же для определенного набора переключателей.
внес изменения. Извини, я виноват.
Приятель, Опять же это не сработает. Просто попробуйте свой ответ на своей машине
это будет работать, потому что все параметры будут иметь одинаковый идентификатор i-го цикла
ранее в вашем обновлении не определен i, поэтому я комментирую
In your array id is same thats why its selecting the option button of other array.
you can try this
//HTMl code
<div *ngFor = "let question of questionList">
{{question.question.query}}
<br>
<div *ngFor = "let option of question.options">
<input type = "radio" [value] = "option" [(ngModel)] = "question.selected">{{option.text}}
<br>
</div>
{{question.selected | json}}
<br>
<br>
</div>
спасибо ... это сработало. еще один вопрос ... есть ли способ присвоить самой опции значение "selected" вместо option.id?