如何访问 angular 中动态创建的按钮？

Question

因此，我正在创建一个测验应用程序，其中有一个用于问题的滚动条，在该滚动条中我有一些按钮，具体取决于问题集的长度。所以我使用 *ngFor 指令创建了这些按钮。现在我想要做的是每当用户选择任何选项 (mcq) 时，滚动条中的问题按钮应该以下列方式突出显示：

如果用户选择任何选项，则将问题按钮颜色更改为绿色
如果用户跳过问题，则将问题按钮颜色更改为黄色

HTML问题滚动条代码：

<div id="answer-buttons" class="ques-grid ">
            <button #navBarButton *ngFor="let item of items">{{item}}</button>
</div>

我试过先使用 ts 文件中的 ViewChild 访问按钮，然后应用一些逻辑，但它不起作用，它只是改变了第一个按钮的颜色

@ViewChild('navBarButton',{ static: false }) navBarButton:ElementRef
//and in some function I've tried this logic
if(this.attemptedQuestionCount[this.currentQuestionIndex]==1){
  this.navBarButton.nativeElement.style.backgroundColor = "#228B22"
}
else{
  this.navBarButton.nativeElement.style.backgroundColor = "#FCF55F"
}

如何实现我的 objective？

Answer 1

您可以使用

将点击处理程序直接添加到按钮

<button *ngFor="let item of items; let indexOfelement=index" 
      (click)="heyYouClicked(indexOfelement)">{{item}}</button>

然后在组件中放置处理程序

export class AppComponent {
  items = ["hello", "world"]

  heyYouClicked(index){
    console.log("you clicked " + index)
  }
}

Answer 2

您可以检查 attemptedQuestionCount 并像这样更改背景颜色

<div id="answer-buttons" class="ques-grid ">
<button *ngFor="let question of questions; let i=index"
    [style.background-color]="attemptedQuestionCount[i] === 1 ? '#228B22' : '#FCF55F'">{{question}}</button>
</div>

Answer 3

为了简单起见，您可以尝试 ngClass。

<button #navBarButton *ngFor="let item of items" class="defualt_state" [ngClass]="{'new_state': (condition_here)}">{{item}}</button>

并且在样式表中你可以配置上面的class

.new_state { background-color: #228B22 !important }

并这样设置按钮的默认颜色

.default_state { background-color : #FCF55F}

因此，当条件匹配时，它将采用 new_state class 中指定的颜色，否则将采用 default_state class.[=16 中的默认颜色=]

Answer 4

添加按钮标签如下：

<button *ngFor="let question of questions; let i=index"
        [style.background-color]="attemptedQuestionCount[i] === 1 ? '#228B22' : '#FCF55F'">{{question}}</button>

如何访问 angular 中动态创建的按钮？

How to access dynamically created buttons in angular?

html

javascript

typescript

mean-stack

angular