Question

我从angular开始，然后关注YouTube上的一个简单教程。当我尝试在浏览器中显示代码时，出现以下错误：

错误TypeError：无法读取未定义的属性“街道”

这是代码：

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

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

export class UserComponent {
    name: string;
    email: string;
    address: address;
    hobbies: string[];
    showHobies: boolean;

    constructor() {
        this.name = 'John Doe';
        this.email = 'John@gmail.com'
        this.address = {
            street: '12 Main st',
            city: 'Boston',
            state: 'MA',
        }
        this.hobbies = ['Music', 'Movies', 'Sports'];
        this.showHobies = false;

    }

    toggleHobies() {
        if (this.showHobies == true) {
            this.showHobies = false;
        }
        else {
            this.showHobies = true;
        }
    }

}
interface address {
    street: string;
    city: string;
    state: string;
}

我试图寻找答案，但是找不到任何可以帮助我的东西。你能告诉我为什么会这样吗？

谢谢

Answer 1

您在标记上输入了属性名称

adress -> address

Answer 2

您有错字。它应该是地址，而不是地址。

<p><strong>Address:</strong> {{address.street}}, {{address.city}}, {{address.state}}</p>

错误TypeError：无法读取未定义的属性“ street”

2 个答案: