是什么導致我的 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>

Answer 2

Mat cat header 未在您的代碼中關閉。 請再次檢查並嘗試使用ng start --open再次運行項目