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的属性“样式”

如何在调用函数之前初始化Element，以便可以找到Element？

Answer 1

在<body> <p> text text sun text text... <tag> some text here moon some text here </tag> text text sun text sun text... <span> <tag> text here moon text text moon text </tag> <tag> moon text here moon text moon, moon </tag> </span> </p> </body>函数中，将所需的颜色设置为变量：

click

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

this.buttonColor = "#6E6E6E"

这样，您无需处理DOM

Answer 2

例如，您可以改用ngClass

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

Answer 3

您的代码存在一些问题。

将div的可见性设置为true后，这些按钮将立即不可用。您必须在ngAfterViewChecked生命周期挂钩处理程序中进行检查。
您不应使用document.getElementById直接访问DOM，因为它被视为反模式。您应该改用Renderer2。
您的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

在javascript

4 个答案: