错误TypeError:无法读取未定义的属性'值'
问题描述:
请问我是Angular的新手,我正在按照Felipe Coury的指导进行操作。 在本书的一章(编写你的第一个angular 2 web应用程序)中,他使用“.value”来显示标题和我们要输入的链接。对他来说,它运行良好,但在我的系统上一直显示“ERROR TypeError:无法读取未定义的属性'值'。我不知道是否因为我升级了我的角度cli到4.5.0。 如果你有一个解决方案,请亲切地帮助我。错误TypeError:无法读取未定义的属性'值'
这是我的代码
app.component.ts
import { Component } from '@angular/core';
import { Article } from 'app/article/article.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
addArticle(title: HTMLInputElement, link: HTMLInputElement): boolean {
console.log(`Adding article title: ${title.value} and link:
${link.value}`);
this.articles.push(new Article (title.value, link.value, 0));
title.value='';
link.value='';
return false;
}
articles:Article[];
constructor() {
this.articles = [
new Article ('Angular 2', 'http://www.angular.io', 3),
new Article ('Fullstack', 'http://www.fullstack.io', 10),
new Article ('Anguar Home page', 'http://www.angular.io', 4)
]
}
}
这是app.component.html
app.component.html
<form class="ui large form segment">
<h3 class="ui header">Add a Link</h3>
<div class="field">
<label for="title">Title:</label>
<input name="title" #newtitle>
</div>
<div class="field">
<label for="link">Link:</label>
<input name="link" #newlimk>
</div>
<button (click)="addArticle(newtitle, newlink)"
class="ui positive right floated button">
Submit link
</button>
</form>
<div class="ui grid posts">
<app-article
*ngFor="let foobar of articles"
[article]="foobar">
</app-article>
</div>
谢谢!
答
您应该使用
<input name="link" #newlink>
所以.. newlink
代替newlimk