嵌套的 ngFor select 不可点击
Nested ngFor select not clickable
我使用 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>
以下图片是我之前解释的视觉指南。
Questions and answers displayed
This happened when I clicked the answer Yes
This happened when I clicked the answer Certainly not
编辑:
根据要求,这是 desiredAnswer 方法。
desiredAnswer(question: ITestQuestion, desiredAnswer: ITestAnswerOption) {
question.answers.forEach(function(answer: ITestAnswerOption) {
answer.desired = false;
});
desiredAnswer.desired = true;
console.log(question.answers);
}
因为我只需要一个答案,并且每个单选按钮都使用 ngModel 链接到一个答案的 属性,在我将所有设置为 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);
}
老实说,我不知道为什么这样解决了,但我只是更改了这一行:
<input type="radio" id="answer{{answerInd}}" [value]="answer.answer" name="desiredAnswerRadio{{questionInd}}" class="custom-control-input" (change)="desiredAnswer(question, answer)">
为此:
<input type="radio" id="answer{{answer.id}}" name="desiredAnswerRadio{{question.id}}" class="custom-control-input" (change)="desiredAnswer(question, answer)">
现在它工作得很好,我可以点击两个问题的单选按钮。
Both questions answered
刚弄明白,我用嵌套 ngfor 的索引设置每个无线电的 id,但它重复了每个新问题,因为嵌套 ngfor 的索引再次从 0 开始。
因此,为什么使用每个答案的 id 立即起作用。
我使用 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>
以下图片是我之前解释的视觉指南。
Questions and answers displayed
This happened when I clicked the answer Yes
This happened when I clicked the answer Certainly not
编辑:
根据要求,这是 desiredAnswer 方法。
desiredAnswer(question: ITestQuestion, desiredAnswer: ITestAnswerOption) {
question.answers.forEach(function(answer: ITestAnswerOption) {
answer.desired = false;
});
desiredAnswer.desired = true;
console.log(question.answers);
}
因为我只需要一个答案,并且每个单选按钮都使用 ngModel 链接到一个答案的 属性,在我将所有设置为 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);
}
老实说,我不知道为什么这样解决了,但我只是更改了这一行:
<input type="radio" id="answer{{answerInd}}" [value]="answer.answer" name="desiredAnswerRadio{{questionInd}}" class="custom-control-input" (change)="desiredAnswer(question, answer)">
为此:
<input type="radio" id="answer{{answer.id}}" name="desiredAnswerRadio{{question.id}}" class="custom-control-input" (change)="desiredAnswer(question, answer)">
现在它工作得很好,我可以点击两个问题的单选按钮。
Both questions answered
刚弄明白,我用嵌套 ngfor 的索引设置每个无线电的 id,但它重复了每个新问题,因为嵌套 ngfor 的索引再次从 0 开始。 因此,为什么使用每个答案的 id 立即起作用。