1

我使用 XMLHttpRequest 创建了自己的上传文件组件，一切正常……我唯一的问题是我创建了一个回调方法来更新上传进度，以便用户可以看到百分比。

如果我对进程进行 consolo.log()，我可以看到它是如何从 0 增加到 100。

但是屏幕并没有反映出来……我在那个组件中有这个功能：

ngOnChanges(){
if(this.progress == 100){
  this.progress = 0;
  this.uploading = false;
}
 }

而且我有一个方法来获取进度的最新值（从父组件触发）

public updateProgress(progress : number){
    this.progress = progress;
    console.log(this.progress);
    if(this.progress == 100)
      this.uploading = false;
  }

如果我有模板

    <div *ngIf="uploading" class="uploading">
    <progressbar [max]="100" [value]="progress"><span style="color:white; white-space:nowrap;">{{progress}} / {{100}}</span></progressbar>
</div>

所以进度条并没有增加进度，即使在控制台中我可以看到值是“进度”变化..

但是经过很长时间，我发现如果在屏幕的任何部分用鼠标单击，则会触发 ngOnChange，并且进度条会更新...所以如果我在文件上传时开始单击，我会可以看到进度...

4

4 回答 4

3

注入

constructor(private cdRef:ChangeDetectorRef){}

更新后progress，致电

this.progress = ...;
this.cdRef.markForCheck();

或者

this.progress = ...;
this.cdRef.detectChanges();

或者你可以注入NgZone

constructor(private zone:NgZone){}

并使用

this.zone.run(() => this.progress = ...);

当从 Angular 外部以 Angular 无法识别的方式调用 Angular 代码时，这会导致更改检测运行。

于 2017-09-06T14:00:44.560 回答
0

我认为您错过了实现 OnChanges 

import {Component,OnChanges, SimpleChange} from '@angular/core';
  export class yourcomponet implements OnChanges {
   ngOnChanges(changes: {[propKey: string]: SimpleChange})
    {
      // Here goes your logic
   }
}
于 2017-09-06T13:52:56.973 回答
0

由于您没有列出所有代码，因此尚不清楚您的父/子组件如何通信。一方面，似乎父母和孩子都有可变的进步。为什么？

另一个问题是你为什么要使用 ngOnChanges？

如果您的子组件知道进度的当前值，请在子组件中创建一个 @Output 变量，并在每次进度更改时发出一个事件。

@Output() currentProgres: EventEmitter <number> = new EventEmitter();
...
this.currentProgress.emit(progress);

在父级中，监听这些事件：

<progressbar [max]="100" (currentProgress)="updateProgress($event)">
...
updateProgress(progress : number){}

父级可以将变量 showProgress 绑定到 UI，因此它会自动更新。

于 2017-09-06T14:05:15.150 回答
0

从示例中我可以看到，在您的子组件中，您正在输入名为value的属性，但在方法检查进度中。确保您将其纳入本地财产进度。ngOnChanges() 将在每次任何输入属性更改时触发。尝试在任何 if() 语句之前在 ngOnChanges() 中打印 console.log 并检查值

于 2017-09-06T14:06:00.133 回答