Угловой не распознающий результат события

Question

Я работаю над групповым проектом. Мы добавляем функцию загрузки изображений в компонент. Я продолжаю получать сообщение об ошибке, что «результата» нет, но он явно есть, и код прекрасно запускается из той же ветки на других машинах.

переключение веток, удаление, переустановка angular cli, exorcism

вот код ts:

export class ProfilePictureComponent implements OnInit {
  url: string;
  onSelectFile(event) { // called each time file input changes
      if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();

        reader.readAsDataURL(event.target.files[0]); // read file as data url

        reader.onload = (event) => { // called once readAsDataURL is completed
          this.url = event.target.result as string;
        }
      }
  }

вот шаблон:

<div id="img-div" *ngIf="url; else nourl">
        <img [src]="url" height="200" width="200"> <br />
    </div>
    <div id="img-default">
            <ng-template #nourl>
                    <img src="./empty.jpg" height="200" width="200">
            </ng-template>
    </div>
    <input type='file' (change)="onSelectFile($event)">

для краткости я опускаю корневой модуль и импортирую / экспортирую. они выглядят нормально, так как код работает на других машинах.

ERROR in src/app/profile-picture/profile-picture.component.ts:17:35 - error TS2339: Property 'result' does not exist on type 'EventTarget'.

17           this.url = event.target.result as string;

Я ожидаю, что код хорошо скомпилируется.

Answer 1

Метод изменения ввода содержит данные в атрибуте event.target.value. см .: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event