我的 html <ul> 标签以及我的 *ng 上的 Angular 抛出错误答案

【问题标题】：Angular throwing error on my html <ul> tag and as well as my *ng我的 html <ul> 标签以及我的 *ng 上的 Angular 抛出错误
【发布时间】：2017-06-07 12:15:19
【问题描述】：

我正在使用 atom 并且我的 ul 和 *ngFor 出现错误，我不明白为什么。我尝试四处搜索，但似乎无法找出我在所有 *ng 内容以及我的 ul 上都出现错误的原因。似乎没有出现 html 标签。

    import { Component } from '@angular/core';

@Component({
  selector: 'user',
  template: `<h1>Hello {{name}}</h1>
            <p><strong>Email</strong>: {{email}}</p>
            <p>Address:{{address.street}} {{address.city}}, {{address.state}}</p>
            <button (click) = "toggleHobbies()">Show Hobbies</button>
            <div *ngIf = 'showHobbies'>
            <h3>Hobbies</h3>
              <ul>
                  <li *ngFor="let hobby of hobbies">
                      {{hobby}}
                  </li>
              </ul>
            </div>
            `,
})
export class UserComponent  {
  name: string;
  email: string;
  address : address;
  hobbies: string[];
  showHobbies: boolean;


constructor(){
        this.name = 'Richard';
        this.email = 'Rjime061@fiu.edu'
        this.address = {
          street : '12 Main St.',
          city : 'Boston',
          state : 'MA'
        }
    }
        this.hobbies = ['Music', 'Movies', 'Sports'];
        this.showHobbies = false;
}
interface address {
    street: string;
    city: string;
    state: string;
}

【问题讨论】：

请提供您收到的准确错误消息，以及有关您的应用程序行为异常的任何其他信息，例如浏览器中的显示。
当然，我现在刚刚提供了我的整个代码。我的 *ngIf 和 *ngFor 以及我的 ul 标签上仍然出现错误
代码不错，但请分享错误信息。顺便说一句，this.hobbies = 和this.showHobbies 行——也许它们应该进入构造函数？它们现在所在的位置会导致编译错误。

标签： angular angular2-template

【解决方案1】：

您在 *ngIf 之前关闭了 DIV，这导致了此错误。

请尝试以下正确版本的代码：

@Component({
      selector: 'user',
      template: `<h1>Hello {{name}}</h1>
                <p><strong>Email</strong>: {{email}}</p>
                <p>Address:{{address.street}} {{address.city}}, {{address.state}}</p>
                <button (click) = "toggleHobbies()">Show Hobbies</button>
        <div *ngIf = 'showHobbies'>
        <h3>Hobbies</h3>
          <ul>
              <li *ngFor="let hobby of hobbies">
                  {{hobby}}
              </li>
          </ul>
        </div>
        `,
})

我已在第 1 行中进行了更改。 7 的代码。

【讨论】：

感谢刚刚做了快速修复，但我仍然在我提到的关于 *ng 和 ul 标签的内容上遇到错误