Question

我无法使用renderer2禁用角度材质的选择下拉列表。以下是我的代码

Component.html

            <mat-select #exLoc (selectionChange)="someFun($event)" [(value)]="someVal">
              <mat-option aria-selected="true" [value]="locVal" *ngFor="let location of locations">{{location.LocationName}}
              </mat-option>
            </mat-select>

Component.ts

constructor(public renderer: Renderer2) {} 
@ViewChild('exLoc') exLoc: ElementRef;
functionToDisableDropDown() {
 this.renderer.setAttribute(this.exLoc, 'disabled', 'true');
}

Answer 1

将exLoc的类型从ElementRef更改为MatSelect

constructor(public renderer: Renderer2) {} 
@ViewChild('exLoc') exLoc: MatSelect;

functionToDisableDropDown() {
  // not sure why is this not working
  //this.renderer.setAttribute(this.exLoc, 'disabled', 'true');

  // without using renderer
  this.exLoc.disabled = true;
}

工作Demo

Answer 2

正确的方法实际上是使用Renderer2。

disabled是一个属性，这就是为什么它无法与您的代码一起使用的原因。

正确的代码：

this.renderer.setProperty(this.exLoc, 'disabled', 'true');

Answer 3

使用-> this.render.setProperty（this.exLoc.nativeElement，'disabled'，true）; “ .nativeElement

Answer 4

我知道这是一个老问题，但是真正的问题可能在于MatSelect是一个自定义元素，实际上没有禁用属性。 MatSelect可能具有自己的ControlValueAccessor管理。因此，如果要禁用MatSelect元素，则应具有对该组件的引用，并使用其自己的setDisabledState方法（从ControlValueAccessor接口实现）。

setDisabledState(isDisabled: boolean): void

例如：

 @ViewChild(MatSelect)
 private _myMatSelect: MatSelect;

 ...

 xxx() {
     this._myMatSelect.setDisabledState(true); // Should trigger the engine to disable your MatSelect element.
 }

无法使用角度材质上的renderer2禁用setAttribute选择

4 个答案: