Как изменить свойства угловых материальных элементов / компонентов?

Question

Привет, я новичок в области угловых, и недавно я использовал материальный счетчик в одном из моих угловых компонентов

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

Теперь в моем файле машинописи я хотел получить доступ к этому элементу счетчика и изменить его режим, чтобы определить, а его отображение заблокировать, поэтому я сделал это так

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

Свойство стиля было изменено, но режим не изменился.Поэтому мне интересно, почему это происходит.Это потому, что режим не является предопределенным свойством?Есть ли способ изменить режим без привязки режима к переменной или свойству?

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;