如何从代码更改 Angular Material 2 进度条值

Question

我正在尝试从组件代码更改 angular material 进度条值。我需要在不使用 binding.

的情况下更改值

以下逻辑通常与 html 控件一起使用，如文本输入。但它不适用于进度条。

HTML:

    <md-progress-bar mode="determinate" 
    id="progressBar" name="progressBar" #progressBar></md-progress-bar>
<button (click)="test()">Test</button>

代码：

@ViewChild('progressBar') progressBar: any;
test() {
this.progressBar.value = "15";
}

Answer 1

值必须是进度条的数字：

this.progressBar.value = 15;

Answer 2

感谢 changedetector 解决方案，据我了解这与 OnPush 有关，现在可以使用了。但我不得不再次转换为使用绑定。所以基本上 changedetector 和绑定一起工作很好。

这是源代码：

<md-progress-bar mode="determinate" [value]="percentage" style="width:70%;"
id="progressBar" name="progressBar" #progressBar></md-progress-bar>

    url: string;
    lastSigResult: SigResult;
    @ViewChild('lastSigResultSpan') lastSigResultSpan: any;
    percentage:string = "";
    message:string = "";

    constructor(private changeDetector: ChangeDetectorRef,private route: ActivatedRoute, private router: Router, private signalRService: SignalRService) {
        this.route.params.subscribe(
            params => {
                console.log(params);
                if (params['url']) { // Eğer url boş değilse
                    this.url = params['url'];
                }
            }
        );

        this.subscribeSignalREvents();
    }

    private subscribeSignalREvents(): void {
        this.signalRService.connectionEstablished.subscribe(() => {
            console.log("Connected to signalr...");
        });
        this.signalRService.messageReceived.subscribe((result: SigResult) => {
            console.log(result);
            // debugger;
            this.changeDetector.markForCheck();
            this.lastSigResult = result;
            this.lastSigResultSpan.nativeElement.value = result.Message;
            this.message = result.Message;
            this.percentage = result.Percentage;
            this.changeDetector.detectChanges();
        });
    }

如何从代码更改 Angular Material 2 进度条值

Howto change Angular Material 2 Progress Bar value from code

angular-material2

angular