Angular2 绑定错误“无法读取未定义的属性‘大小’”

Question

我正在尝试克隆 https://imageresize.org/ 以练习 Angular 5。 但是，我遇到了一个问题，它阻止我将 typescript 文件中的值绑定到 html。

这是输入：

<input type="file" accept="image/*" autocomplete="off" style="display: none" id="input" draggable="true" (change)='changeInput()' multiple>

我也在使用xkeshi的图片压缩器（https://github.com/xkeshi/image-compressor）来压缩图片：

changeInput() {
    this.img = <HTMLImageElement>document.querySelector('img,#image');
    this.files = (<HTMLInputElement>document.querySelector('input[type=file],#input')).files
    this.inputFlag = true;
    for (var i = 0; i < this.files.length; i++) {
      var imageCompressor = new ImageCompressor;
      imageCompressor.compress(this.files[i],{
        quality: .4
      }).then((result)=>{
        this.results[i] = result;
        this.resultSize = result.size;
        this.sizeRound = `${Math.round(100 - this.resultSize * 100 / this.fileSize)}%`;
      })
    }
  }

results 是一个 Blob 数组，用于在循环中获取“result”的值：

results: Blob[] = [];

HTML 绑定：

<tr *ngFor ="let file of files, let i = index">
                  <td style="height: 30px"  class="text-center">{{file.name.slice(0,7)}}</td>
                  <td style="height: 30px"  class="text-center">{{status}}</td>
                  <td style="height: 30px"  class="text-center"></td>
                  <td style="height: 30px"  class="text-center">{{file.size}}</td>
              <td style="height: 30px"  class="text-center">{{results[i].size}}</td>
              <td style="height: 30px"  class="text-center">{{sizeRound}}</td>
            </tr>

我得到的错误： a printscreen of the error 有谁知道如何解决这个问题？谢谢你。 p/s: 对不起我的英语，我不是母语人士

Answer 1

据我了解，当值可能不可用时，角度会在组件启动时立即开始放置值。 因此，对象上确实不存在大小，或者其值目前不可用。

尝试使用可选值：

<td style="height: 30px"  class="text-center">{{file?.size}}</td>

Answer 2

您可以先使用条件运算符检查数组是否为 != null，然后再尝试访问它。

<td style="height: 30px"  class="text-center">{{results ? results[i]?.size : null}}</td>

Answer 3

这可能是由于 Angular 中的异步问题，“结果”尚未如您预期的那样导出。

<td style="height: 30px"  class="text-center">{{results ? results[i]?.size : null}}</td>

同样在组件中，通过如下方法显式调用结果。

changeInput() {
    this.img = <HTMLImageElement>document.querySelector('img,#image');
    this.files = (<HTMLInputElement>document.querySelector('input[type=file],#input')).files
    this.inputFlag = true;
    for (var i = 0; i < this.files.length; i++) {
      var imageCompressor = new ImageCompressor;
      imageCompressor.compress(this.files[i],{
        quality: .4
      }).then((result)=>{
        //this.results[i] = result;
        this.refreshResults(i, result);
        console.log(this.results);
        this.resultSize = result.size;
        this.sizeRound = `${Math.round(100 - this.resultSize * 100 / this.fileSize)}%`;
      })
    }
  }

refreshResults(index, result) {
    this.results[index] = result;
}