Angular array.push（）返回空对象
[英]Angular array.push() returns empty object
问题描述
hi I am working on a tutorial project, for the first part I am trying to make a form that will accept a book ISBN number and then query it's price on the internet. 
嗨，我正在研究一个教程项目，在第一部分中，我试图制作一个可以接受书号的ISBN号，然后在互联网上查询其价格的表格。
As a starter I made an array of books as sample data, a table to display them and a form to accept the ISBN. 首先，我制作了一系列书籍作为样本数据，一个显示它们的表格以及一个接受ISBN的表格。
At this stage I would just like the form to add the ISBN to the existing array but this is not working. 在此阶段，我只需要将窗体添加到现有数组中即可，但这是行不通的。 When I submit the form the data is not added to the table but an empty table row is added. 当我提交表单时，数据不会添加到表中，而是会添加一个空表行。 So something is happening but somehow not correctly 所以发生了一些事情，但是不正确
My appfile 我的应用程式档案
(function() {
var app = angular.module('booksApp', []);
app.controller('BooksController', function() {
this.queryResults = results;
});
app.controller('QueryController', function() {
this.queryBook = function(){
this.val = this.isbn;
results.push([{ISBN: }]);
this.isbn = '';
};
});
var results = [
{
name: 'book 1',
ISBN: 1234,
price: 13.4
},
{
name: 'book 2',
ISBN: 1234234,
price: 32.8
}
];
})();
My html file 我的html文件
<body ng-controller="BooksController as books">
<form ng-controller="QueryController as qry" ng-submit="qry.queryBook()">
Please enter ISBN number to be queried:
<input type="text" ng-model="qry.isbn" />
<input type="submit" value="query" /> <br />
The queried value is {{qry.val}}
</form>
<table class="table">
<thead>
<tr>
<td>ISBN</td>
<td>Book Name</td>
<td>Shop</td>
<td>Stock</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in books.queryResults">
<td>{{result.ISBN}}</td>
<td>{{result.name}}</td>
<td>{{result.shop}}</td>
<td>{{result.stock}}</td>
<td>{{result.price | currency}}</td>
</tr>
</tbody>
</table>
<script src="js/angular.js" type="text/javascript"></script>
<script src="booksApp.js" type="text/javascript"></script>
</body>
2 个解决方案
解决方案1
1 已采纳 2014-12-10 13:23:15
Instead of results.push([{ISBN: }]); 而不是results.push([{ISBN: }]); you need to do: results.push({ISBN: }); 您需要执行以下操作： results.push({ISBN: }); because you need to push new object, and results.push([{ISBN: }]); 因为您需要推送新对象，所以是results.push([{ISBN: }]); pushed new array with one element. 用一个元素推送新数组。
解决方案2
0 2014-12-10 14:33:29
Rasalom's solution is essentially right but the reason why is not included. Rasalom的解决方案本质上是正确的，但未包括其原因。
In your HTML you are accessing your results values for display using the below. 在HTML中，您正在使用以下内容访问要显示的结果值。
<tr ng-repeat="result in books.queryResults">
<td>{{result.ISBN}}</td>
<td>{{result.name}}</td>
<td>{{result.shop}}</td>
<td>{{result.stock}}</td>
<td>{{result.price | currency}}</td>
</tr>
So you are setting the expectation that each element in the array queryResults is an object. 因此，您可以期望数组queryResults中的每个元素都是一个对象。 Each of these objects should have the properties ISBN name shop stock price . 这些对象中的每个对象都应具有ISBN name shop stock price属性。
When you add a new value to results, you use 在结果中添加新值时，您使用
results.push([{ISBN: this.val }]);
So you are pushing an array into results. 因此，您正在将数组推入结果。 The array has one element, an object with property ISBN. 该数组具有一个元素，即一个具有ISBN属性的对象。
This causes the issue because you are expecting every element in queryResults to be an object. 这引起了问题，因为您期望queryResults每个元素都是一个对象。
When ng-repeat gets to the element that is an array, all of the expected properties are undefined. 当ng-repeat到达数组的元素时，所有预期的属性都未定义。 With angular it appears that trying to interpolate an undefined value using {{}} won't display any value. 使用angular似乎试图使用{{}}插入未定义的值将不会显示任何值。
See fiddle: http://jsfiddle.net/gabs00/e5jo7sf3/2/ 请参阅小提琴： http : //jsfiddle.net/gabs00/e5jo7sf3/2/
To summarize: 总结一下：
You are adding incorrectly formatted data to the results array. 您正在将格式错误的数据添加到结果数组。 The values are not being printed because you are not passing the data in the expected format. 由于未按预期格式传递数据，因此未打印这些值。 Your code is checking for properties on an array, properties that have not been defined. 您的代码正在检查数组上的属性，即尚未定义的属性。
results.push({ISBN:this.val});
Adds to queryResults an object as expected, with at least 1 of the expected properties. 增加queryResults一个对象作为预期的，与所期望的性质中的至少1。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.