Установить свойство кнопки в 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: Невозможно прочитать свойство 'style' из null

Как я могу инициировать Элемент перед вызовом функции, чтобы найти Элемент?

Answer 1

Есть несколько проблем с вашим кодом.

1. Кнопки не будут доступны сразу после того, как вы установили для div видимость true. Вы должны будете проверить это внутри ngAfterViewChecked обработчика хука жизненного цикла.

2. Вы не должны иметь прямого доступа к DOM, используя document.getElementById, так как это считается анти-паттерном. Вы должны использовать 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>

Образец StackBlitz .

Answer 2

В функции click установите желаемый цвет в переменную:

this.buttonColor = "#6E6E6E"

В своем HTML вы можете привязать этот цвет так:

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

Таким образом, вам не нужно иметь дело с DOM

Answer 3

вместо этого вы можете использовать ngClass, например

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

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