Ошибка привязки Angular2 "Не удается прочитать свойство 'размер' из неопределенного"

Question

Я пытаюсь клонировать https://imageresize.org/ для практики Angular 5. Однако я сталкиваюсь с проблемой, которая не позволяет мне привязать значение из файла машинописи к html.

Вотinput:

<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 для получения значения«результата» в цикле:

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>

Я получаю ошибку: Экран печати ошибки Есть ли у кого-нибудь идеикак это исправить? Спасибо. p / s: извините за мой английский, я не являюсь носителем языка

Answer 1

Вы можете использовать условный оператор, чтобы сначала проверить, является ли массив! = Null, прежде чем пытаться получить к нему доступ.

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

Answer 2

Возможно, из-за асинхронной проблемы в 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;
}

Answer 3

Насколько я понимаю, angular начинает выставлять значения, как только компонент запускается, когда значение может быть недоступно.Таким образом, либо размер действительно не существует в объекте, либо его значение в данный момент недоступно.

Попробуйте использовать дополнительные значения:

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