Angular innerHtml 綁定中駝峰到小寫 html 屬性的轉換

Question

在我的組件中，我有一個模板文字字符串，其中包含一個帶有駝峰命名的 HTML 標記：

htmlString = `<mat-icon svgIcon="edit" ...></mat-icon>`;

該字符串被組裝為數組 forEach 循環中對象的屬性。

由於模板中的幾個原因，我需要在 *ngFor 循環內的 innerHtml 屬性中輸出它：

<li *ngFor="let foo of foos" [innerHTML]="foo.htmlString"></li>

（這是我的實現的簡化代碼示例。）

我發現在輸出中svgIcon屬性以小寫svgicon呈現，請參閱 DOM 檢查器輸出：

<li _ngcontent-qui-c96="">
  <mat-icon svgicon="edit"></mat-icon>
</li>

錯誤或功能？ 找不到有關此行為的任何信息。 感謝您的任何提示！

Answer 1

屬性確實都被 Angular 轉換成小寫了，不用擔心。

此外，您作為副作用提出的觀點很有趣，可能需要一些解釋：您將innerHtml與 Angular 組件（ mat-icon ，它不是標准的 HTML 標記）一起使用。

因此，無論如何，它都會失敗：Web 瀏覽器不知道如何呈現mat-icon 。

對於要呈現的mat-icon ，它必須通過 Angular 模板引擎：Angular 將看到mat-icon ，並將提取組件定義/模板，並以瀏覽器可以理解的 HTML 術語 (DOM) 呈現它。

通常在您的情況下，您應該使用：

<li *ngFor="let foo of foos">
  <mat-icon [svgIcon]="foo.icon" ...></mat-icon>
</li>

如果您的組件更復雜，您可以使用帶有ng-content內容投影進行探索。