ng-repeat 未识别 angularjs 数组答案

【问题标题】：angularjs Array not regnized by ng-repeatng-repeat 未识别 angularjs 数组
【发布时间】：2018-12-27 18:58:30
【问题描述】：

我正在 NodeJS（服务器部分）和 AngularJS（视图部分）上编写一个 API，它要求另一个 API（NodeJS 也是）获取一个包含图片数组的对象。我对这个数组中的图片很感兴趣。

我编写了一个 for 循环来获取对象中图片数组中包含的所有图片的名称：

for(j=0; j<reference.pictures.length; j++){
   self.url ="http://localhost:3000/api/pictures/"+reference.pictures[j].picture;
   self.urlArray = urlArray.push(self.url);
 }
 console.log(urlArray);

我为我的观点写了一个 ng-repeat：

<div ng-repeat="url in urlArray">
  <img ng-src="{{url}}"  width="150px"/>
  <br/>
</div>

我的问题？当我 console.log 时，我可以看到我的 url 包含在我的 url 数组中，但是我在我的 ng-repeat 视图中看不到它们。我想我的 ng-repeat 并不完美，但仍然不知道为什么有任何想法吗？

为了理解，我想显示我的数组中包含的所有图片，所以我首先这样做了：

控制器：

    self.url = "http://localhost:3000/api/pictures/"+reference.pictures[j].picture;

查看：

<div ng-repeat="picture in reference.pictures">
  <img ng-src="{{url}}"  width="150px"/>
  <br/>
</div>

结果我有很多图片，但是用于获取图片的 URL 是最后一个被分配退出循环的 URL，所以我所有的图片都是相同的（最后一个），这就是我得到的原因用我所有不同的 URL 创建一个数组的想法

【问题讨论】：

标签： javascript angularjs node.js api

【解决方案1】：

您缺乏将urlArray 构造为对象字面量 的数组，即：

[
  { url: 'someUrl' }, 
  { url: 'anotherUrl' },
  ...
]

所以改为这样做：

self.urlArray = [];
for(j=0; j<reference.pictures.length; j++) {
  self.urlArray.push({
    url: "http://localhost:3000/api/pictures/"+reference.pictures[j].picture
  })
}

...

<div ng-repeat="url in urlArray">
  <img ng-src="{{ url.url }}" width="150px">
  <br>
</div>

【讨论】：

【解决方案2】：

Angular 中的原型继承存在一些细微差别 - 请查看 this post 以获得更深入的解释。

基本上，您的ng-repeat 无法访问您想要的urlArray，因为在childScope 中创建了一个新变量，覆盖parentScope 中的相同变量。如果您改为将 urlArray 设为对象的属性，那应该可以解决您的问题。

【讨论】：

【解决方案3】：

我假设您使用self 引用$scope。如果是这种情况，您的代码的主要问题是这个分配：

self.urlArray = urlArray.push(self.url);

Array#push 返回更新后数组的长度，因此self.urlArray 将始终包含一个整数。而且您不能在 AngularJS 中使用 ng-repeat 循环整数。要解决此问题，只需删除分配：

urlArray.push(self.url);

【讨论】：

感谢您的回复 Yes u'r right self =$scope 但是当我删除作业时，我的视图仍然没有更新我的图片，这就是为什么我相信我的 ng-repeat不正确但是谢谢，现在我知道为什么我在 console.log urlArray 时总是有一个整数；）