意外的结束标签“div”错误angular2 HTML答案

【问题标题】：Unexpected closing tag "div" error angular2 HTML意外的结束标签“div”错误angular2 HTML
【发布时间】：2017-01-05 15:54:38
【问题描述】：

我在控制台中遇到了一些错误，但不确定HTML 中的问题是什么。任何帮助将不胜感激。

error_handler.js:51 例外：未捕获（承诺中）：错误：模板解析错误：意外的结束标签“div”（“点击这里注册 [ERROR ->] "): ResetPassword@22:1 错误：模板解析错误：意外的结束标签“div”（“点击这里注册 [ERROR ->] "): ResetPassword@22:1

<section class="reset-password">
<div class="container container-responsive inner-top-xs">
    <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm.value, resetPasswordForm.valid)">
        <h4>Please enter your e-mail address and a temporary password will be sent to you.</h4>
        <div class="form-group">
            <label class="control-label" for="email">Email</label>
            <input type="text" formControlName="email" required class="form-control" id="email" placeholder="Email">
            <validation-message [control]="resetPasswordForm.controls.email"></validation-message>
        </div>
        <button type="submit" class="btn btn-flat__blue outer-top-xs" [disabled]="!resetPasswordForm.valid">RESET PASSWORD</button>
    </form>
    <div class="alert alert-dismissible alert-danger outer-top-xs" *ngIf="errorMessage && !successMessage"">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{errorMessage}}
    </div>
    <div class="alert alert-dismissible alert-success outer-top-xs" *ngIf="successMessage">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{successMessage}}
    </div>
    <div class="outer-top-xs">
        <a [routerLink]="['/getstarted']">Click here to Signup</a>
    </div>
</div>
</section>

【问题讨论】：

标签： html angular

【解决方案1】：

*ngIf="errorMessage && !successMessage"" 的双引号过多：

<div class="alert alert-dismissible alert-danger outer-top-xs" *ngIf="errorMessage && !successMessage"> 
<!--at the end of this line-->

【讨论】：

没有比使用“typo”关闭原因更好的例子了。
@torazaburo 哦，有这样的事情吗？我不知道！ :) 那么是的，你绝对是对的
天哪。谢谢。

【解决方案2】：

当您打开一个元素但不关闭它时会发生此错误。此错误显示在此示例中：

<ion-list *ngSwitchCase="'facilities'">
 <ion-item *ngFor="let facility of facilities">
  <ion-icon name="facility.Icon" item-start></ion-icon>
  {{facility.Name}}
  <ion-icon color="red" name="rose" item-end></ion-icon>
 </ion-item> 
<ion-list>

如你所见，我没有关闭 <ion-list> 元素（应该是 </ion-list>）

小心：

如果您使用任何元素属性及其值，因为解析器无法处理它们，该元素将被打开并发生此错误（上例中的“”）。

【讨论】：