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)}%`;
      })
    }
  }

结果是一个Blob数组，用于获取＆＃34;结果＆＃34;的值。在循环中：

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

据我了解，当值可能不可用时，angular会在组件启动时立即开始设置值。因此，对象上的任何一个大小确实不存在，或者它的值目前不可用。

尝试使用可选值：

<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;
}

Angular2绑定错误＆＃34;无法读取属性＆＃39; size＆＃39;未定义＆＃34;

3 个答案: