Question

我目前正在尝试使用Renderer2更改按钮的属性，但我不断收到错误消息：

错误TypeError：无法读取未定义的属性“ setAttribute”

我希望能够在单击按钮时将其禁用属性添加到按钮。

我正在使用由角料制成的垫子按钮组件： https://material.angular.io/components/button/overview

我尝试将按钮引用的值记录到控制台，但未记录“未定义”

这是按钮html元素：

<button #stickButton mat-raised-button color="warn" (click)="onStickButtonClick()">Stick to Bottom</button>

这是打字稿类中的引用和onclick函数：

constructor(private renderer: Renderer2){
}

@ViewChild('stickButton', {static: false}) private stickButton: ElementRef;

onStickButtonClick(){
  this.renderer.setAttribute(this.stickButton.nativeElement, 'disabled', '');
}

我希望的输出是button元素变成这样：

<button #stickButton disabled mat-raised-button color="warn" (click)="onStickButtonClick()">Stick to Bottom</button>

Answer 1

您的上述代码适用于普通按钮，而不适用于附加了实质性按钮指令的按钮。

通过ViewChild获得的元素实际上是MatButton类型的元素，没有属性nativeElement。因此，在您的情况下未定义的是

this.stickButton.nativeElement。

由于它是MatButton，因此实际上您可以直接禁用该按钮，例如：

this.stickButton.disabled = true

这是一个完整的示例：

export class AppComponent  {
  constructor(){
  }

  @ViewChild('stickButton', {static: false}) private stickButton: MatButton;

  onStickButtonClick(){
    this.stickButton.disabled = true;
  }
}

这里是stackblitz

无法使用Renderer2更改使用ViewChild引用的按钮的属性

1 个答案: