fa-icon 在有效的结束标签上抛出错误

Question

我正在开发一个 Angular 应用程序，在此应用程序中我生成了一个用于列出文件的小组件，并且我正在开发一些用于编辑字段的图标。但是我遇到了fa-icon 组件的问题。我有两个并排的图标。第一个拒绝允许结束标签，第二个需要它。 （我假设此时第二个实际上是嵌套的）如果没有给我这个错误，我就不能对两者都应用结束标签：

我的模板：

<form [formGroup]="form">
  <mat-grid-list class="grid" cols="4" rowHeight="32">
    <mat-grid-tile class="tile" mat-grid-tile-header>{{type}}</mat-grid-tile>
    <mat-grid-tile class="tile" mat-grid-tile-header>
      <span [hidden]="editing" (click)="editing = true">{{name}}</span>
      <form [formGroup]="edit" [hidden]="!editing" ng-submit="editing = false">
        <input type="text" formControlName="name" ng-required (keyup)="onKeyUp($event)" />
        <fa-icon class"confirm" [icon]="faConfirm" (click)="onSubmit()"></fa-icon>
        <fa-icon class="cancelIcon" [icon]="faConfirm" (click)="onCancel()"></fa-icon>
      </form>
    </mat-grid-tile>
    <mat-grid-tile class="tile" mat-grid-tile-header>{{scanDate}}
    </mat-grid-tile>
    <mat-grid-tile class="tile" mat-grid-tile-header>
      <mat-checkbox formControlName="delete" aria-label="Delete"></mat-checkbox>
    </mat-grid-tile>
  </mat-grid-list>
</form>

我一生都无法弄清楚为什么会发生这种情况。有什么想法吗？

Angular: 9.1.12 @fortawesome/angular-fontawesome: 0.5.0

Answer 1

所以我的代码的实际问题是一个被忽视的错字。 class="confirm 缺少 =。我怀疑奇怪异常的原因可以在这个问题中找到：Very unintuitive "Unexpected closing tag" error on a valid template

Answer 2

看起来，您在类属性中遗漏了一个等号 (=)。检查下面的代码。希望它能解决您的问题。

<fa-icon class="confirm" [icon]="faConfirm" (click)="onSubmit()"></fa-icon>

为什么会出现这样的错误？ 根据我的理解，由于根据 HTML 标准给出的属性格式不正确，因此 HTML 引擎无法将其识别为正确的开始标记，最终它开始在结束标记中给出错误。通常，在任何 HTML 内容中，如果您在结束标记中看到任何错误，则表示开始标记的格式不正确。当然，开始标记语法中存在某种类型的错误，您应该非常仔细地查看开始标记语法，然后您将能够快速修复此类问题。