Question

我使用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，并更新进度条...所以如果我在上传文件时开始点击我能够看到进展......

Answer 1

注入

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无法识别的方式调用时，会导致更改检测运行。

Answer 2

我认为你错过了实现OnChanges

import {Component,OnChanges, SimpleChange} from '@angular/core';
  export class yourcomponet implements OnChanges {
   ngOnChanges(changes: {[propKey: string]: SimpleChange})
    {
      // Here goes your logic
   }
}

Answer 3

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

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

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

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

在家长中，听听这些事件：

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

父级可以将一个变量showProgress绑定到UI，以便它自动更新。

Answer 4

从示例中我可以看到，在您的子组件中，您输入的是名为 value 的属性，但在方法检查进度中。确保你把它放入当地的房产进度。每次输入属性更改时，ngOnChanges（）都将触发。尝试在任何if（）语句之前在ngOnChanges（）中打印console.log并检查值

ngOnChanges仅在有动作时才起作用

4 个答案: