Ich kann keine Eingabeformulareinträge abrufen, um die Tabelle

Question

zu füllen. Ich baue gerade eine einfache kleine App, während ich angular.js lerne, und habe ein wenig Mühe, eine Tabelle mit den vom Benutzer eingegebenen Daten zu füllen. Ich erhalte eine Fehlermeldung:

Cannot read property 'push' of undefined 

Die JS ist unten:

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 = {}; 
}; 
}): 

Die html wie folgt aussieht:

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

i yardsale.item.product log trösten können und sehen, was Ich gebe ein, aber kann es nicht in die Tabelle einfügen

Answer 1

Sie erhalten den Fehler cannot read property push of undefined wegen Ihrer Variabel le genannt items. Versuchen Sie, yardSale.items = [] nach dieser Codezeile aka Ihren Konstruktor hinzuzufügen.

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

Answer 2

cannot read property push of undefined 

Dieser Fehler tritt auf, wenn Sie den Wert einer Variablen zuzugreifen versuchen, die nicht deklariert ist. In diesem Fall wird yardSale.items niemals deklariert. Der Compiler sollte darüber informiert werden, dass ein solches Attribut für das Objekt yardSale existiert, auch, ob dieses Attribut (dh Elemente) ein Objekt oder ein Array ist. Daher ist die Antwort von @amcpanaligan eine korrekte Lösung. müssen Sie es als erklären:

yardSale.items = []; 

Der Versuch:

yardSale.items.push(yardSale.item); 

Es funktioniert.