Невозможно использовать Renderer2 для изменения атрибута кнопки, на которую ссылается ViewChild

Question

В настоящее время я пытаюсь изменить атрибут кнопки с помощью Renderer2, но постоянно получаю сообщение об ошибке:

ОШИБКА TypeError: Невозможно прочитать свойство 'setAttribute' из неопределенного

Я хочу иметь возможность добавлять отключенный атрибут к кнопке при нажатии на нее.

Я использую компонент кнопки мат из углового материала: https://material.angular.io/components/button/overview

Я попытался записать значение ссылки кнопки на консоль, и она не записывает 'undefined'

Вот 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 #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;
  }
}

Вот стек-блиц