fa-icon在有效的结束标记上引发错误

问题描述

我有一个正在使用的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

解决方法

看起来，您在类属性中错过了一个等号（=）。检查以下代码。希望它能解决您的问题。

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

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

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

angular angular angular-fontawesome