是什么导致我的 Angular 模板中出现此错误消息：E 解析模板中的错误：意外的结束标记 "div"

Question

这是我的 html 模板文件：

<div class="container"
    fxLayout="row wrap"
    fxLayout.sm="column"
    fxLayout.xs="column"
    fxLayoutAlign.gt-md="space-around center"
    fxLayoutGap="10px" 
    fxLayoutGap.xs="0">

  <div fxFlex="100" dir="rtl">
    <div>
      <h3 *ngIf="">اطلاعات کاربر</h3>
      <hr>
    </div>
  </div>

  <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          <h3>{{user.firstname | uppercase}}</h3>
        </mat-card-title>
      </mat-card-header>
      <img mat-card-image src="{{ baseURL + default_user.filename}}" >
      <mat-card-content>
        <p>{{user.lastname}}</p>
      </mat-card-content>
  </div>

  <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
    <mat-list>
      <h3>مشخصات</h3>
      <mat-list-item >
        <h4 matLine> {{user.firstname}} </h4>
        <p matLine> {{user.lastname</p>
            <!--
        <p matLine>
          <span> -- {{comment.author}} {{comment.date | date }} </span>
        </p>
            -->

      </mat-list-item>
    </mat-list>
  </div>
  <div [hidden]="user || errMess">
      <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
  </div>
  <div *ngIf="errMess">
    <h2>Error</h2>
    <h4>{{errMess}}</h4>
  </div>
</div>

<!--
        <form novalidate [formGroup]="commentForm" #cform="ngForm" (ngSubmit)="onSubmit()">
      <p>
        <mat-slider min="1" max="5" step="1" thumbLabel tickInterval="1" name="rating" formControlName="rating"></mat-slider>
        <mat-form-field class="full-width">
          <textarea matInput formControlName="comment" placeholder="Your Comment" rows=12></textarea>
          <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>
        </mat-form-field>
      </p>
      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="commentForm.invalid">Submit</button>
    </form>
-->

这是我得到的错误：

ERROR in Errors parsing template: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
        </p>
      </mat-card-content>
  [ERROR ->]</div>

  <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
"): C:/Users/m/Desktop/SEP/version1-frontend/src/app/users/users.component.html@27:2, Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
    <h4>{{errMess}}</h4>
  </div>
[ERROR ->]</div>

<!--
"): C:/Users/m/Desktop/SEP/version1-frontend/src/app/users/users.component.html@52:0

问题是什么？为什么我会收到此错误消息？我检查了每个标签几次，似乎一切正常，而且我的 V 代码 IDE 也没有错误，但是当我运行通过 npm start 的程序时，我得到了上述错误信息！请帮助我知道问题是什么，我该如何解决？

Answer 1

您需要关闭 mat-card 标签。

<div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
<mat-card>
  <mat-card-header>
    <mat-card-title>
      <h3>{{user.firstname | uppercase}}</h3>
    </mat-card-title>
  </mat-card-header>
  <img mat-card-image src="{{ baseURL + default_user.filename}}" >
  <mat-card-content>
    <p>{{user.lastname}}</p>
  </mat-card-content>
 </mat-card> //<--- **This one is missing**
</div>

是什么导致我的 Angular 模板中出现此错误消息：E 解析模板中的错误：意外的结束标记 "div"

What causes this error message in my Angular template: ERROR in E parsing template: Unexpected closing tag "div"

html

tags

angular-template

angular-material