Angular 中基于 ngModel 实现多选去重与答案校验的完整教程

浅婷小哥_9390

发布时间：2026-07-13 15:00:43

476人浏览过

来源于php中文网

原创

Angular 中基于 ngModel 实现多选去重与答案校验的完整教程

本文详解如何在 Angular 模板中结合 [(ngModel)] 与 *ngFor 动态绑定多个 <select> 元素，实现用户选择值的实时收集、重复项检测及无序正确答案匹配验证。

本文详解如何在 angular 模板中结合 `[(ngmodel)]` 与 `*ngfor` 动态绑定多个 `

在 Angular 表单交互场景中，常需支持用户从多个独立下拉框中自由选择一组值（如本例中从 13 个动物名称中选出指定的 6 种），且要求所选结果无重复、顺序无关、内容精确匹配预设答案。直接监听 (change) 事件并手动维护状态易出错、逻辑分散；而采用模板驱动表单（Template-driven Forms）配合 ngModel，可显著提升代码清晰度与可维护性。

✅ 核心实现策略

双向绑定选中值：为每个 <select> 分配唯一索引，通过 [(ngModel)]="selected[i]" 将选中值映射到数组；
自动去重检测：利用 Set 构造器生成无重复集合，对比原始数组长度即可判定是否存在重复；
无序答案验证：使用 Array.prototype.every() 遍历所有已选值，确保每一项均存在于正确答案数组中；同时需保证选中总数等于答案长度（避免多选或漏选）。

? 完整代码示例

@Component({
  selector: 'app-animal-selector',
  template: `
    <div class="select-inner" *ngFor="let art of pictures; let i = index">
      <label>{{ art.id }}</label>
      <select [(ngModel)]="selected[i]">
        <option value="" disabled>Select an animal</option>
        <option *ngFor="let street of streetNames" [value]="street.name">
          {{ street.name }}
        </option>
      </select>
    </div>
    <button (click)="nextPage()" class="btn btn-primary">Submit Answer</button>
  `,
  styles: [`
    .select-inner { margin-bottom: 12px; }
    select { width: 180px; padding: 6px; }
  `]
})
export class AnimalSelectorComponent {
  // 每个 mural 位置对应一个下拉框（共 6 个）
  pictures = [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }, { id: '6' }];

  // 初始化空数组，长度与图片数一致，防止 undefined 引发校验异常
  selected: string[] = new Array(this.pictures.length).fill('');

  // 预设正确答案（顺序无关）
  readonly correctAnswer = ['Ezel', 'Paard', 'Kikker', 'Slang', 'Vleermuis', 'Rog'];

  // 所有可选项（含干扰项）
  streetNames = [
    { name: 'Ezel' }, { name: 'Paard' }, { name: 'Kikker' },
    { name: 'Slang' }, { name: 'Vleermuis' }, { name: 'Rog' },
    { name: 'test1' }, { name: 'test2' }, { name: 'test3' },
    { name: 'test4' }, { name: 'test5' }
  ];

  checkAnswers(): boolean {
    // 过滤掉空值（未选择项），仅校验有效选择
    const validSelections = this.selected.filter(v => v !== '');

    // 条件1：数量必须恰好为6
    if (validSelections.length !== this.correctAnswer.length) return false;

    // 条件2：无重复（Set 去重后长度不变）
    const uniqueSelections = [...new Set(validSelections)];
    if (uniqueSelections.length !== validSelections.length) return false;

    // 条件3：每个选中项都必须在正确答案中存在
    return validSelections.every(item => this.correctAnswer.includes(item));
  }

  nextPage() {
    if (this.checkAnswers()) {
      this.router.navigate(['/', 'paardenos']);
    } else {
      this.translate.get('BUTTONS.ALERT').subscribe(text =>
        alert(text)
      );
    }
  }
}