Question

我试图从组件代码中更改角度材质进度条值。我需要在不使用绑定的情况下更改值。

以下逻辑通常适用于htmlcontrols，如文本输入。但它并不适用于进度条。

HTML：

    if empanelled: 
        empanelledtxt= "<br> We are already empanelled with your company<br>"
    else:
        empanelledtxt=""
    html=html = """\
        <html>
          <body>
            Hi {name}<br>
            Hope you are doing well.""".format(name=firstname)+empanelledtxt+"""</body></html>"""`

代码：

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

Answer 1

值必须是progressBar的数字：

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 Progress Bar值

2 个答案: