Question

代码如下：

const test = Array.from(document.getElementsByClassName('mat-form-field-infix'));
test.forEach((element) => {
    element.outerHTML = '<div class="good-day-today" style="width: 0px;"></div>'; // Please note that this line works fine!
    element.style.padding = '10px';
    element.style.borderTop = '0';
});

编译时出现错误：

src / app / / 中的
ERROR.component.ts（101,21）：错误TS2339：属性类型“元素”上不存在“样式”。 src / app / / .component.ts（102,21）：错误TS2339：属性“样式” 类型“元素”上不存在。

我该如何解决？

我尝试删除Array.from...部分，尝试使用for of和for in，尝试as any，但是以上是我必须这样做的方法。

Answer 1

您需要进行类型转换：

Array.from(document.getElementsByClassName('mat-form-field-infix') as HTMLCollectionOf<HTMLElement>)

这是因为getElementsByClassName only returns HTMLCollection<Element>，并且Element没有style属性。 HTMLElement通过ElementCSSInlineStyle扩展接口does implement it。

请注意，此类型转换是类型安全的，因为每个Element都是HTMLElement或SVGElement，但我希望您的SVG Elements没有课。

Answer 2

我在做的时候也遇到了类似的问题

document.querySelectorAll(".<className>");

所以我没有添加样式属性，而是通过添加另一个类来解决它。

示例：

//css file
    .<classname> {
        display: none;
      }
    .<classname>.show {
        display: flex;
      }

//ts file
elements.forEach((ele, index) => {
const errors = something.length;
if (index < errors) {
  ele.classList.add("show");
} else {
  ele.classList.remove("show");
}

}); };

Answer 3

设置externalHTML时，将破坏那里的原始元素。因此，您的样式无效。

您会注意到，如果将其更改为设置innerHTML，则样式会起作用。

这并不会做完全相同的事情，但我希望它能为您指明正确的方向。

Sub runstatements()


Dim dbsaging As DAO.Database
Dim rstclient As DAO.Recordset
Dim strSQL As String

Set dbsaging = CurrentDb
strSQL = "SELECT * Sheet1.[CompanyID], Sheet1.[CustomerNumber], Sheet1.[Customer Name], Sheet1.[Pymnt Terms], Sheet1.[Associate Name], Sheet1.[Week End], Sheet1.[Doc Date], Sheet1.[Days Open], Sheet1.[Current], Sheet1.[31 - 60 Days], Sheet1.[61 - 90 Days], Sheet1.[91 - 120 Days], Sheet1.[121 and Over], Sheet1.[Balance] * FROM Sheet1"

Set rstclient = dbsaging.OpenRecordset(strSQL)

End Sub

Answer 4

另一种选择是使用querySelectorAll和一个类型参数。 getElementsByClassName不是通用的，但querySelectorAll是-您可以传递将要选择的元素的类型，如下所示：

const test = document.querySelectorAll<HTMLElement>('.mat-form-field-infix');

这不需要任何类型转换，和它将允许您立即使用forEach，而不是先将其转换为数组。（getElementsByClassName返回一个HTMLCollection，它没有forEach方法； querySelectorAll返回一个NodeList，其中有有一个{{1} }方法，至少在某些最新的浏览器上。要支持旧版浏览器，您还需要polyfill，或先将其转换为数组。）

TS2339：类型“元素”上不存在属性“样式”

4 个答案: