Angular自定义指令属性绑定问题：isCorrect首次值为undefined

问题描述 #

在Angular项目中，尝试实现点击题目选项时，正确选项背景色变为黄色、错误选项变为红色的功能，但遇到以下问题：

• 指令中的isCorrect变量首次取值为undefined，导致点击正确选项时也显示红色背景
• 所有选项会同步变色，不符合仅点击选项变色的需求

现有代码 #

question.component.html #

<div class="options">
    <ol *ngFor="let option of optionsList; let i = index">
        <li (click)="optionChose(i)">
            <div appChangeBg 
                [isCorrect] = "isCorrectOptionChosen" 
                 class="card">
                 {{ option }}
            </div>
        </li>
    </ol>
</div>

question.component.ts #

export class QuestionComponent implements OnInit {
   isCorrectOptionChosen: boolean;
     optionChose(index: number) {
        if (index === this.correctOptionIndex) {
            this.isCorrectOptionChosen = true;
        } else {
           this.isCorrectOptionChosen = false;
        }
     }
 }

change-bg.directive.ts #

@Directive({
    selector: '[appChangeBg]'
 })
 export class ChangeBgDirective {
    @Input() isCorrect: boolean = false;

    constructor(private elRef: ElementRef, private renderer: Renderer2) {}

    @HostListener('click') answer() {
      if (this.isCorrect === true) {
         this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'yellow');
    }else{
       this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'red');
    }
  }
}  

问题根源 #

1. 变量未初始化：组件中的isCorrectOptionChosen未设置初始值，默认值为undefined，导致指令的isCorrect初始值也是undefined，点击时this.isCorrect === true不成立，触发红色背景逻辑。
2. 全局变量滥用：所有选项绑定同一个isCorrectOptionChosen变量，点击任意选项后，所有选项的指令会同步拿到同一个值，导致所有选项同时变色，违背仅点击选项变色的需求。

解决方案 #

方案1：实现独立选项状态管理 #

该方案支持仅点击的选项变色，且可保留选中状态。

1. 修改question.component.ts

export class QuestionComponent implements OnInit {
  selectedIndex: number | null = null; // 记录被点击的选项索引
  correctOptionIndex: number = 0; // 替换为实际的正确选项索引

  optionChose(index: number) {
    this.selectedIndex = index; // 标记当前点击的选项
  }
}

2. 修改question.component.html

<div class="options">
    <ol *ngFor="let option of optionsList; let i = index">
        <li (click)="optionChose(i)">
            <div appChangeBg 
                [isCorrect]="i === correctOptionIndex"
                [isSelected]="i === selectedIndex"
                class="card">
                {{ option }}
            </div>
        </li>
    </ol>
</div>

3. 修改change-bg.directive.ts

import { Directive, ElementRef, Input, Renderer2, HostListener, OnChanges } from '@angular/core';

@Directive({
    selector: '[appChangeBg]'
 })
 export class ChangeBgDirective implements OnChanges {
    @Input() isCorrect: boolean = false;
    @Input() isSelected: boolean = false;

    constructor(private elRef: ElementRef, private renderer: Renderer2) {}

    // 监听输入属性变化，更新背景色
    ngOnChanges() {
      this.updateBgColor();
    }

    private updateBgColor() {
      if (this.isSelected) {
        const color = this.isCorrect ? 'yellow' : 'red';
        this.renderer.setStyle(this.elRef.nativeElement, 'background-color', color);
      } else {
        // 未被点击时恢复默认背景色
        this.renderer.removeStyle(this.elRef.nativeElement, 'background-color');
      }
    }
}  

方案2：简化点击逻辑（无选中状态保留） #

如果不需要保留选中状态，可直接让指令判断当前选项是否正确：

1. 修改question.component.html

<div class="options">
    <ol *ngFor="let option of optionsList; let i = index">
        <li>
            <div appChangeBg 
                [isCorrect]="i === correctOptionIndex"
                class="card">
                {{ option }}
            </div>
        </li>
    </ol>
</div>

2. 修改change-bg.directive.ts

@Directive({
    selector: '[appChangeBg]'
 })
 export class ChangeBgDirective {
    @Input() isCorrect: boolean = false;

    constructor(private elRef: ElementRef, private renderer: Renderer2) {}

    @HostListener('click') answer() {
      const color = this.isCorrect ? 'yellow' : 'red';
      this.renderer.setStyle(this.elRef.nativeElement, 'background-color', color);
    }
}  

关键修复总结 #

• 初始化变量：确保isCorrect不会出现undefined，可在指令或组件中设置默认值
• 独立状态管理：每个选项的正确状态、选中状态独立绑定，避免全局变量导致的同步变色问题
• 指令逻辑优化：通过ngOnChanges监听属性变化或直接处理点击事件，确保背景色正确更新

内容的提问来源于stack exchange，提问作者Jewel Chakraborty