即使严重性已更改，p 按钮也不会更改

Question

我有一个p-轮播，里面有一批词汇卡，每张都有一个单选题，用户必须为该单词选择正确的翻译答案，然后轮播会自动切换到下一张卡。

我使用四个p按钮来显示问题选项，当用户单击正确的答案按钮时，按钮应该变成绿色，这个逻辑很简单，没有问题。 （我现在使用

severity=success

表示选择了正确的答案，使用

severity=danger

表示选择错误，默认情况下所有按钮都是

severity=secondary

）。当用户选择错误的按钮时，已单击的按钮应变为红色，表示错误答案，同时正确的按钮应变为绿色，以显示正确的答案。问题是，我发现我只能更改我单击的按钮的严重性，而无法更改其他按钮的严重性。例如，当我点击btn1时，我希望btn2变绿，btn1变红，现在只有btn1成功变红，但btn2保持不变。

在 HTML 中，我只需将所有四个按钮的 ref 作为参数传递，这样我就可以使用一些逻辑来操作它们来设置颜色或严重性。

这是 HTML：

<p-carousel #carousel [value]="words2Learn" [numVisible]="1" [numScroll]="1" [showNavigators]="false"
                [showIndicators]="false" itemStyle="width:100%" [page]="wordIdx"
                (onPage)="onPageSwitch($event, carousel)">
                <ng-template let-word pTemplate="item">
                    <p-fieldset legend={{word.wordDto.bookNameCh}}
                        class="card flex flex-column md:flex-row md:align-items-center justify-content-around">
                        <div
                            class="flex flex-column md:flex-row md:align-items-center justify-content-around max-lg:gap-0">
                            <span class="flex justify-content-center mb-2 lg:mr-3">
                                <p-button #transBtn1 label="{{word.options[0]}}" severity="secondary"
                                    (click)="onChooseATrans(0,word, transBtn1, transBtn2, transBtn3, transBtn4)"></p-button>
                            </span>
                            <span class="flex justify-content-center mb-2 lg:mr-3">
                                <p-button #transBtn2 label="{{word.options[1]}}" severity="secondary"
                                    (click)="onChooseATrans(1,word, transBtn1, transBtn2, transBtn3, transBtn4)"></p-button>
                            </span>
                            <span class="flex justify-content-center  mb-2 lg:mr-3">
                                <p-button #transBtn3 label="{{word.options[2]}}" severity="secondary"
                                    (click)="onChooseATrans(2,word, transBtn1, transBtn2, transBtn3, transBtn4)"></p-button>
                            </span>
                            <span class="flex justify-content-center mb-2 lg:mr-3">
                                <p-button #transBtn4 label="{{word.options[3]}}" severity="secondary"
                                    (click)="onChooseATrans(3,word, transBtn1, transBtn2, transBtn3, transBtn4)"></p-button>
                            </span>
                        </div>
</p-carousel>

.ts代码：

onChooseATrans(chooseIdx: number, word: any, btn1: Button, btn2: Button, btn3: Button, btn4: Button) {
        // always reveal right answer after a click, the switch works, severity set successfully, but button on page remains same.
        switch (word.rightAnIdx) {
            case 0:
                btn1.severity = 'success';
                console.log(btn1);
                break;
            case 1:
                btn2.severity = 'success';
                console.log(btn2);
                break;
            case 2:
                btn3.severity = 'success';
                console.log(btn3);
                break;
            case 3:
                btn4.severity = 'success';
                console.log(btn4);
                break;
            default:
                break;
        }
        // if select is right logic
        if (chooseIdx === word.rightAnIdx && !word.wordStatusOffset) {
            this.words2Learn.filter(x => x.wordDto.id === word.wordDto.id).map(x => x.wordStatusOffset = -1);
            this.showAllDetails();
        }
        // if select is wrong, set selected btn to danger severity
        else if (chooseIdx !== word.rightAnIdx && !word.wordStatusOffset) {
            this.words2Learn.filter(x => x.wordDto.id === word.wordDto.id).map(x => x.wordStatusOffset = 1);
            this.showAllDetails();
            switch (chooseIdx) {
                case 0:
                    btn1.severity = 'danger';
                    break;
                case 1:
                    btn2.severity = 'danger';
                    break;
                case 2:
                    btn3.severity = 'danger';
                    break;
                case 3:
                    btn4.severity = 'danger';
                    break;
                default:
                    break;
            }
        }

在.ts代码中，

onChooseATrans()

函数处理按钮单击事件。在这里，无论正确还是错误，正确的按钮总是变成绿色，所以第一个 switch 子句总是命中，之后我应该检查点击是否正确，对于点击错误的按钮，我应该将点击的按钮变成红色，但正如我所提到的，单击的按钮不会改变严重性，它只是保持不变。我尝试过

console.log(btn1)

，看看严重性属性是否已正确更改，我看到它确实如此，事件认为严重性已设置为

success

，网页上仍显示

secondary

。但如果我单击右键，它会按预期变为绿色。所以问题似乎是我无法以这种方式操纵其他按钮。请帮忙！

顺便说一句：Primeng版本17.18；角度版本：17.

Answer 1

transBtn1 是某种元素，这意味着它可能应该与：

transBtn1.setAttribute('severity', 'danger')

或

transBtn1.nativeElement.setAttribute('severity', 'danger')

然而，将属性绑定到作用域变量更为常见。

[severity]="someVariable"

或将其绑定到可观察的（behaviorSubject）（更适合changeDetection）

[severity]="someVariableObservable$ | async"

我可能会使用您的单词数组在模板中循环（并向数组添加严重性）：

 @for (item of words; track item.severity) {
   <button [severity]="item.severity" (click)="item.severity = 'danger'">{{ item.name }}</button>
  }