我从角度开始，并在YouTube上关注一个简单的教程 . 当我尝试在浏览器中显示代码时，我收到以下错误：
ERROR TypeError：无法读取未定义的属性“street”
这是代码：
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;
}
我试图寻找答案，但找不到任何可以帮助我的东西 . 你能告诉我为什么会这样吗？
谢谢
2 回答
您在标记上输入了错误的属性名称
你有一个错字 . 它应该是地址，而不是地址 .