<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