Angular 无法识别事件结果答案

【问题标题】：Angular not recognizing event resultAngular 无法识别事件结果
【发布时间】：2020-02-28 00:36:00
【问题描述】：

我正在做一个小组项目。我们正在向组件添加图片上传功能。我不断收到没有“结果”的错误，但显然有，并且代码在其他机器上的同一分支中运行良好。

切换分支，卸载重装angular cli，驱魔

这是 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;

我希望代码可以正常编译。

【问题讨论】：

你能做一个console.log( event.target.result)吗？
Refused to load the image 'http://localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
您可以尝试将event.target 转换为any，例如this.url = (event.target as any).result; stackoverflow.com/questions/35789498/…
你先生，是金神，我活了。

标签： angular data-binding event-handling

【解决方案1】：

输入变化方法保存event.target.value属性中的数据。参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

【讨论】：