テーブルに入力するための入力フォームアイテムを取得できません

Question

私は現在、angular.jsを学んでいるので、簡単な小さなアプリケーションを構築していますが、ユーザーが入力したデータでテーブルを作成するのに少し問題があります。私は、エラーを受信して​​います：

Cannot read property 'push' of undefined 

JSは以下の通りです：

var app = angular.module('yardApp', []); 

app.controller('mainController', function($http){ 
    var yardSale = this; 
    yardSale.forSale = []; 

    yardSale.login = function(){ 
    yardSale.loggedIn = true; 

$http({ 
    method: "POST", 
    url: "/user", 
    data: { username:yardSale.username } 
}).then(function(result){ 
    console.log(result.data); 
    yardSale.userId = result.data._id; 
    yardSale.userId = result.data.username; 
}); 

}; 

yardSale.addItem = function(){ 
console.log(yardSale.item.product); 
    yardSale.items.push(yardSale.item); 
    // yardSale.item = {}; 
}; 
}): 

HTMLは次のようになります。

<div> 
     <h1>Welcome to the Yard Sale!!</h1> 
     <h2 ng-hide="yardSale.loggedIn"> Plese login to get started.</h2> 
     <h2 ng-show="yardSale.loggedIn">Welcome {{ yardSale.username }}!</h2> 
     <h2 ng-show="yardSale.loggedIn">Have anything you'd like to sell?</h2> 
     <h3 ng-show="yardSale.loggedIn">Please, list it here!</h3> 
    </div> 
    <form ng-submit="yardSale.login()" ng-hide="yardSale.loggedIn"> 
     <input type="text" placeholder="Please enter a username" ng-model="yardSale.username"> 
     <input class="btn btn-primary" type="submit" value="login"> 
    </form> 
    <div class="row" ng-show="yardSale.loggedIn"> 
     <form ng-submit="yardSale.addItem()"> 
     <input type="text" placeholder="Item for Sale" ng-model="yardSale.item.product"> 
     <input type="text" placeholder="Price you'd like" ng-model="yardSale.item.price"> 
     <input type="date" placeholder="Date Listed" ng-model="yardSale.item.date"> 
     <input class="btn btn-primary" type="submit" value="add"> 
     </form> 
     <table class="col-md-6 col-md-offset-4 table-bordered"> 
     <thead> 
      <tr> 
      <th>Item</th> 
      <th>Price</th> 
      <th>Date Listed</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat=" item in yardSale.items"> 
      <td>{{ item.product }}</td> 
      <td>{{ item.price | currency }}</td> 
      <td>{{ item.date | date }}</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 

私は、ログyardsale.item.productをコンソールと何を参照することができます私は入力しますが、テーブルに入力することはできません

Answer 1

あなたのエラーはですファイル名はitemsです。あなたのコンストラクタと呼ばれるこのコード行の後にyardSale.items = []を追加してみてください。

var yardSale = this; 
yardSale.forSale = []; 
yardSale.items = []; 

Answer 2

cannot read property push of undefined 

あなたが宣言されていない変数の値にアクセスしようとしているときにこのエラーが表示されます。この場合、yardSale.itemsは決して宣言されません。コンパイラは、オブジェクトyardSaleにそのような属性が存在するかどうか、またその属性（つまりアイテム）がオブジェクトであるか配列であるかどうかを知る必要があります。したがって、@ amcpanaliganの答えは正しい解決策です。

yardSale.items = []; 

試して：あなたは、としてそれを宣言する必要があり

yardSale.items.push(yardSale.item); 

それは動作します。