时间戳

首页 > 解决方案 > 错误类型错误：无法读取未定义的属性“街道”

angular - 错误类型错误：无法读取未定义的属性“街道”

问题描述

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

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

这是代码：

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;
}

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

谢谢

标签： angulartypescript

解决方案

您在标记上输入错误的属性名称

adress -> address

推荐阅读