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 缺少 =。我怀疑可以在这个问题中找到奇怪异常的原因：

Answer 2

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

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

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

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

fa-icon throws error on valid closing tag

angular

angular-fontawesome