如何更改角形材料元素/组件的属性？

Question

您好，我是角度的初学者，最近我在一个角度组件中使用了材料旋转器

<mat-progress-spinner [id]="demo1" value="30" mode="indeterminate" diameter ='32' ></mat-progress-spinner>

现在，在我的打字稿文件中，我想访问此微调器元素，并将其模式更改为determinate，并将其显示更改为阻塞，因此我这样做是

let b= document.getElementById("demo1") as any;
    b.mode="determinate";
    b.style.display="block";

样式属性已更改，但模式未更改。所以我想知道为什么会这样。是否因为mode不是预定义的属性？是否可以在不将模式绑定到变量或属性的情况下更改模式？

Answer 1

mat-progress-spinner是一个角度分量。 getElementById仅允许您访问HTML元素。

您需要在其父组件中获得对微调器组件的引用才能对其进行操作。

在您的父组件的TS文件中，输入以下内容：

@ViewChild(MatProgressSpinner) mySpinner;

或在微调器上使用诸如#mySpinner之类的命名引用（如果有多个）：

<mat-progress-spinner #mySpinner [id]="demo1" value="30" mode="indeterminate" diameter ='32' ></mat-progress-spinner>

在这种情况下，您将获得对它的引用（在父组件的TS文件中）：

@ViewChild('mySpinner') mySpinner: MatProgressSpinner;