ERROR TypeError: Cannot set property 'innerHTML' of null when trying to alter InnerHtml property of a label (Typescript / HTML / Angular)

Question

我正在尝试使用 InnerHtml 属性在单独的标签中显示选定的文件名，但是在更改时（上传文件时）没有显示任何内容，并且我收到错误消息“错误类型错误：无法设置属性 'innerHTML' 为空。

我的HTML（输入和对应的标签）

<button class="image-upload-button" mat-stroked-button (click)="fileUploader.click()" color="primary">Upload Image</button>
<label for="fileUploader" id="file"></label>
<input type="file" accept="image/*" #fileUploader id="fileUploader" (change)="displayFileName($event)" (change)="showPreview($event)"  style="display: none;">

我的目标是设置 ID 为“文件”的标签，以显示使用文件输入上传/选择的文件的名称。该按钮只是打开文件资源管理器的一种方式。

on change函数“displayFileName($event)”负责设置上传新文件时标签的值。

显示文件名：

displayFileName(fileInput: Event) {
    let file = (fileInput.target as HTMLInputElement).files![0];
    let fileName = file.name;
    console.log(fileName);
    const element: HTMLElement = document.getElementById('#file') as HTMLElement;
    element.innerHTML = fileName;
  }

控制台准确地记录了我需要显示的内容，尽管无论如何我仍然收到错误。我在这里做错了什么？

Answer 1

getElementById 的语法错误，您只传入了id 的名称。这就是元素为空的原因。

const element: HTMLElement = document.getElementById('file') as HTMLElement;

此外，使用它来检查元素是否存在是一个很好的做法，所以它可以像

 if(element)
   element.innerHTML = fileName;

Stackblitz

ERROR TypeError: Cannot set property 'innerHTML' of null when trying to alter InnerHtml property of a label (Typescript / HTML / Angular)

ERROR TypeError: Cannot set property 'innerHTML' of null when trying to alter InnerHtml property of a label (Typescript / HTML / Angular)

html

file

innerhtml

typescript

angular