在angular2中绑定的一种方法不起作用

时间:2017-04-18 11:18:53

标签: angular

<progress-bar [value]="currentProgressValue" [max]="currentProgressMaxValue" [title]="currentTaskName"></progress-bar>

如果我像

一样使用它
<progress-bar [value]="30" [max]="100" [title]="abc"></progress-bar>

它有效,但是如果我使用上面的话就没有。

修改:我正在使用此套餐:https://github.com/pleerock/ngx-progress-bar/blob/master/src/index.ts

我在我看来有这个代码,

这是我的viewmodel

@Output() public currentProgressValue: number
@Output() public currentProgressMaxValue: number
@Output() public currentTaskName: string


pushTask(maxValue: number, isIndeterminate: boolean = true, taskName: string) {

    var token = new ProgressToken(maxValue, isIndeterminate, taskName);

    token.subscribe((x) => {
        if (this.currentToken == null || this.currentToken == token) {
            this.currentProgressValue = x;
            this.currentProgressMaxValue = token.maxValue;
            this.currentTaskName = token.taskName;
            console.log(this.currentProgressValue)
        }

        if ((this.currentToken == token && x >= token.maxValue)) {
            this.activeTasks = this.activeTasks.filter((x) => x != token);
            var nextTask = this.activeTasks.find(x => x != null);
            if (nextTask != null) {
                this.isCurrentProgressIndeterminate = nextTask.isIndeterminate;
                this.currentProgressMaxValue = token.maxValue;
                this.currentProgressValue = x;
                this.currentToken = nextTask;
            }
        }
    });

    this.activeTasks.push(token);

    return token;
}

如果我调试它们但是UI没有更新,我看到属性会改变。我做错了什么?

这是我用来测试它的代码:

ngOnInit() {
    if (isBrowser) {
        this.progressToken = this.progress.pushTask(100, true, "Doing work");
        var prog = 0;
        let timer = TimerObservable.create(2000, 1000);

        this.subscription = timer.subscribe(t => {
            this.progressToken.next(this.v)
            this.v = this.v + 1;
        });

    }
}


import { Subject } from 'rxjs/Subject'
import 'rxjs/Rx';


export class ProgressToken extends Subject<number> {

    isIndeterminate: boolean
    currentValue: number
    maxValue: number
    taskName: string

    constructor(maximumValue: number, isIndeterminate: boolean, currentTaskName: string) {
        super();
        this.taskName = currentTaskName;
        this.maxValue = maximumValue;
        this.isIndeterminate = isIndeterminate;
    }


}

以下是我导入组件的方式:

import { ProgressComponent } from '../progress/progress.component'

@Component({
    selector: 'login-component',
    templateUrl: './login.component.html',
    providers: [ProgressComponent]
})

并且ProgressComponent标记为Injectable(),然后在构造函数中将其用作

private progress: ProgressComponent

参考这个答案:https://stackoverflow.com/a/39801791/4487530

0 个答案:

没有答案