angular - 嵌套 ngFor 选择不可点击
问题描述
我正在使用 ngFor 提出问题,在这些问题中,我使用另一个 ngFor 来显示可能的答案,每个答案旁边都有一个单选按钮。
一切都正确生成,如果我单击第一个问题中任何答案的收音机,一切顺利。
当我尝试单击第二个问题的答案时,问题就出现了,如果我单击其中任何一个,则会选中第一个问题的单选按钮。
这是我现在拥有的代码。
<div id="question{{questionInd}}" class="card bg-blue-grey bg-lighten-5" *ngFor="let question of focusGroup.aptitudeTest.questions; let questionInd = index">
<div class="card-header"><span class="text-bold-500 primary">¿{{question.question}}?</span></div>
<div class="card-body">
<div class="card-block">
<div *ngFor="let answer of question.answers; let answerInd = index" class="custom-control custom-radio custom-control-inline">
<input type="radio" id="answer{{answerInd}}" [value]="answer.answer" name="desiredAnswerRadio{{questionInd}}" class="custom-control-input" (change)="desiredAnswer(question, answer)">
<label class="custom-control-label" for="answer{{answerInd}}">
<span class="display-block"><i class="ft-minus"></i> {{answer.answer}}</span>
</label>
</div>
</div>
</div>
</div>
以下图片旨在作为我之前解释的视觉指南。
编辑:
根据请求,这是desiredAnswer方法。
desiredAnswer(question: ITestQuestion, desiredAnswer: ITestAnswerOption) {
question.answers.forEach(function(answer: ITestAnswerOption) {
answer.desired = false;
});
desiredAnswer.desired = true;
console.log(question.answers);
}
由于我只需要一个答案,并且每个单选按钮都使用ngModel链接到答案的属性,因此在方法中我将 all 设置为 false ,然后将所需的设置为true。
解决方案
您需要考虑 javascript 对象范围。在desiredAnswer
函数question.answers.forEach(function(answer: ITestAnswerOption) {
中,answer: ITestAnswerOption
对象与您传递给要设置desiredAnswer.desired = true;
的函数的对象不同,因此函数应如下所示
desiredAnswer(question: ITestQuestion, desiredAnswer: ITestAnswerOption) {
question.answers.forEach(function(answer: ITestAnswerOption) {
if (desiredAnswer == answer) answer.desired = true;
else answer.desired = false;
});
console.log(question.answers);
}
推荐阅读
- php - 带有柯比的垂直标签
- asp.net-core - 如何将角色包含到返回的 JWT 令牌中?
- python - 定义python类时是否使用括号
- discord.js - 如何检查用户是否具有来自特定服务器的特定角色,然后在嵌入中给他们一个徽章
- react-native - React Native 不能使用通配符 SSL
- reactjs - 酶模拟 axios PUT 未被调用
- julia - JULIA 流程经理
- image-processing - ML.Net 改变图像
- node.js - 无法在我的 Lambda 函数中上传到 AWS S3
- elasticsearch - 如何在弹性搜索中使用必须和应该