错误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