在javascript中设置按钮的属性

Question

我有一组用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;
}

现在，我想根据不同的选择定义按钮的一些属性，如color和active。因此，我扩展到以下功能：

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'

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

Answer 1

在click函数中，将您想要的颜色设置为变量：

this.buttonColor = "#6E6E6E"

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

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

这样，您就不需要处理DOM了

Answer 2

例如，您可以使用ng类

  <button class="ABCD_Buttons" *ngIf="is_ABCD" [ngStyle]="{'background':is_ABCD? '#6E6E6E' : 'red' } (click)="myFunction('D')" id="ABCD_Buttons_D">D</button>

Answer 3

您的代码存在一些问题。

1. 将div的可见性设置为true后，按钮将无法立即使用。你必须检查ngAfterViewChecked生命周期钩子处理程序内部。
2. 您不应该使用document.getElementById直接访问DOM，因为它被视为反模式。你应该使用Renderer2代替。
3. 你的div的结束标记是<\div>。什么时候应该是</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>

Sample StackBlitz。

Answer 4

给setTimeout为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)        
}

看到这个例子：https://stackblitz.com/edit/angular-yejpkw?file=src%2Fapp%2Fapp.component.ts