在Angular 6中,可以使用[(ngModel)]指令来实现多项选择题中显示正确答案的功能。下面是一个示例代码:
{{ option.text }}
在组件中,需要定义一个正确答案的属性correctAnswer和一个选项数组的属性options。在选项数组中,每个选项都有一个text属性和一个checked属性。correctAnswer属性用于存储正确答案的值。
import { Component } from '@angular/core';
@Component({
selector: 'app-quiz',
templateUrl: './quiz.component.html',
styleUrls: ['./quiz.component.css']
})
export class QuizComponent {
options = [
{ text: 'Option 1', checked: false },
{ text: 'Option 2', checked: false },
{ text: 'Option 3', checked: false },
{ text: 'Option 4', checked: false }
];
correctAnswer = 'Option 3';
updateSelectedOptions() {
// 遍历选项数组,将选中的选项存储到selectedOptions数组中
const selectedOptions = this.options.filter(option => option.checked);
// 判断selectedOptions数组中是否包含正确答案,如果包含则显示正确答案
if (selectedOptions.some(option => option.text === this.correctAnswer)) {
console.log('Correct answer selected');
}
}
}
在组件的updateSelectedOptions方法中,首先使用filter方法来遍历选项数组,将选中的选项存储到selectedOptions数组中。然后使用some方法判断selectedOptions数组中是否包含正确答案,如果包含则显示正确答案。
请注意,以上代码仅为示例,你可以根据自己的需求进行修改。