错误类型错误：尝试更改标签的 InnerHtml 属性时无法将属性“innerHTML”设置为空（Typescript / HTML / Angular）

Posted 2023-05-07

【中文标题】错误类型错误：尝试更改标签的 InnerHtml 属性时无法将属性“innerHTML”设置为空（Typescript / HTML / Angular）

【英文标题】：ERROR TypeError: Cannot set property 'innerHTML' of null when trying to alter InnerHtml property of a label (Typescript / HTML / Angular)

【发布时间】：2021-10-22 06:43:42

【问题描述】：

我正在尝试使用 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;
  

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

【问题讨论】：

元素是否在您尝试设置 html 时呈现？在您设置的 html 之前尝试控制台日志记录

好像你不是，当使用'console.log(element.innerHtml)'时，什么都没有记录？尽管为标签元素设置了一个值。

控制台记录时的元素是什么？，它是未定义的吗？还是空？

【参考方案1】：

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

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

另外，使用它来检查元素是否存在是一个好习惯，所以它可以像

 if(element)
   element.innerHTML = fileName;

Stackblitz