2017-04-25 130 views
1

請問我是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> 

謝謝!

回答

1

您應該使用

<input name="link" #newlink> 

所以.. newlink代替newlimk

相關問題