在javascript中设置按钮的属性

我有一组用HTML实现的按钮，通过单击另一个按钮显示：

<button
  type="button"
  class="button_searchtype"
  (click)="button_ABCD_tapped()"
  id="button_ABCD">
  ABCD
</button>

<div *ngIf="is_ABCD" class="ABCD">
        <h3>Choose a letter</h3>
        <button class="ABCD_Buttons" (click)="myFunction('A')" id="ABCD_Buttons_A">A</button>
        <button class="ABCD_Buttons" (click)="myFunction('B')" id="ABCD_Buttons_B">B</button>
        <button class="ABCD_Buttons" (click)="myFunction('C')" id="ABCD_Buttons_C">C</button>
        <button class="ABCD_Buttons" (click)="myFunction('D')" id="ABCD_Buttons_D">D</button>
<\div>

现在，我想根据不同的选择定义按钮的一些属性，如

颜色

和

活动

。因此，我将功能扩展到：

button_ABCD_tapped(){
    this.is_ABCD = true;
    document.getElementById("ABCD_Buttons_D").style.background = "#6E6E6E";
    document.getElementById("ABCD_Buttons_D").style.background = "#6E6E6E";
    document.getElementById("ABCD_Buttons_D").style.background = "#E6E6E6";
    document.getElementById("ABCD_Buttons_D").style.background = "#6E6E6E";
}

但随后，我收到以下错误：

TypeError:无法读取null的属性“style”

---

如何在调用函数之前启动元素，以便找到元素？

将

设置超时值设置为0，这将导致角度变化检测立即运行，并且在变化检测中会呈现DOM元素

button_ABCD_tapped(){ 
    this.is_ABCD = true;
    setTimeout(() => {
        document.getElementById("ABCD_Buttons_A").style.background = "#6E6E6E";
        document.getElementById("ABCD_Buttons_B").style.background = "#6E6E6E";
        document.getElementById("ABCD_Buttons_C").style.background = "#E6E6E6";
        document.getElementById("ABCD_Buttons_D").style.background = "#6E6E6E";
    }, 0)        
}

请参见此示例：
在
单击功能中，将所需颜色设置为变量：

this.buttonColor = "#6E6E6E"

在HTML中，您可以这样绑定到该颜色：

  <button class="ABCD_Buttons" [style.background]="buttonColor">D</button>    

D

这样，您就不需要处理DOM了，例如，您可以使用ngClass


您的代码有一些问题

将div的可见性设置为true后，这些按钮将不可用。您必须在
ngAfterViewChecked
lifecyclehook处理程序中检查

您不应该使用
document.getElementById
直接访问DOM，因为它被视为反模式。您应该改用
Renderer2

div
的结束标记是
。当它应该是

记住这两种解决方案，我建议如下：

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  is_ABCD;

  @ViewChild('ABCD_Buttons_A') buttonA: ElementRef;
  @ViewChild('ABCD_Buttons_B') buttonB: ElementRef;
  @ViewChild('ABCD_Buttons_C') buttonC: ElementRef;
  @ViewChild('ABCD_Buttons_D') buttonD: ElementRef;

  constructor(private renderer: Renderer2) {}

  button_ABCD_tapped(){
    this.is_ABCD = true;
  }

  ngAfterViewChecked() {
    this.buttonA && this.renderer.setStyle(this.buttonA.nativeElement, 'background', 'red');
  }

  myFunction() {

  }

}

和模板

<button
  type="button"
  class="button_searchtype"
  (click)="button_ABCD_tapped()"
  id="button_ABCD">
  ABCD
</button>

<div *ngIf="is_ABCD" class="ABCD">
        <h3>Choose a letter</h3>
        <button class="ABCD_Buttons" (click)="myFunction('A')" #ABCD_Buttons_A>A</button>
        <button class="ABCD_Buttons" (click)="myFunction('B')" #ABCD_Buttons_B>B</button>
        <button class="ABCD_Buttons" (click)="myFunction('C')" #ABCD_Buttons_C>C</button>
        <button class="ABCD_Buttons" (click)="myFunction('D')" #ABCD_Buttons_D>D</button>
</div>


ABCD
选一封信
A.
B
C
D

.
使用angular时通常会使用angular。所有document.getElementById都是实现这一点的精确计数器。我建议不要使用这样的DOM函数。尽可能地使用角度。在HTML模板中的按钮上添加
style.background
指令您能给我举个例子说明如何执行此操作吗？我现在很不对劲。我只是将（单击）=“button\u ABCD\u tapped（）”更改为onclick=“button\u ABCD\u tapped（）”并且对我有效查看stackblitz演示，只需扩展其他按钮即可。。。@user184994的回答在这里也是正确的@RohitSharma:它不取决于我们提供的
间隔，而是setTimeout，它将强制进行更改检测。。
<button
  type="button"
  class="button_searchtype"
  (click)="button_ABCD_tapped()"
  id="button_ABCD">
  ABCD
</button>

<div *ngIf="is_ABCD" class="ABCD">
        <h3>Choose a letter</h3>
        <button class="ABCD_Buttons" (click)="myFunction('A')" #ABCD_Buttons_A>A</button>
        <button class="ABCD_Buttons" (click)="myFunction('B')" #ABCD_Buttons_B>B</button>
        <button class="ABCD_Buttons" (click)="myFunction('C')" #ABCD_Buttons_C>C</button>
        <button class="ABCD_Buttons" (click)="myFunction('D')" #ABCD_Buttons_D>D</button>
</div>