Question

我使用原子和我的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;
}

Answer 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>
        `,
})

我在第一行做了修改。代码中的7个。

我的html <ul>标签以及我的* ng上的角度抛出错误

1 个答案: