AngularJS

Question

我知道已经有很多关于这个主题的问题得到了解答。

我是 Angular 的新手，还不了解 {{variable}} 的具体工作原理。

我正在使用 API，响应是这样的：

data : "MTS-K"
license : "CC BY 4.0 -  https://creativecommons.de"
ok : true
stations : Array(3)
0 : {id: "XXX", name: "XXX", brand: "XXX", street: "XXX", place: "YYY"}
1 : {id: "XXX", name: "XXX", brand: "XXX", street: "XXX", place: "YYY"}
2 : {id: "XXX", name: "XXX", brand: "XXX", street: "XXX", place: "YYY"}
__proto__ : Object

我获取此数据的 ts 如下所示：

this.GasStationProvider.getStations(this.location.lat, this.location.lng).subscribe(
gasStation => {
    this.gasStation = gasStation.stations;
});

我的 HTML 是这样的：

<p>{{gasStation.stations}}</p>

呈现的 HTML 像这样：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

你能帮我显示站点数组中的每个 "line" 吗？或者，如果您知道一个好的教程，请将 link 发给我。

非常感谢

Answer 1

首先，如果您使用的是 TypeScript，那么您使用的是 Angular 2+ 而不是 AngularJS。因此，*ngFor 是正确的用法，而不是 ng-repeat。

它的工作方式类似于 for 循环中的迭代器：

//pseudocode

for( item in array )
   //using interpolation
   {{ item.value }}

因此，如果您正在获取 Object 对象，您可能想尝试更进一步并尝试在数组中输出一个值，例如

<p>
    {{gasStation.stations.name}}
</p>

另一个提示是 console.log 您的对象，这样您就可以看到它是如何通过的。

Answer 2

您可以使用 ng-repeat 遍历 array of objects，也可以遍历 each field of the object。

/*First loop will iterate over all objects of gasStation*/

<p ng-repeat="station in gasStation">//iterating the stations array

  //this 2nd loop will iterate over the objects field: {id: "XXX", name: "XXX",..}

  <li ng-repeat="(key, value) in station">//iterating over each field in the object.
    {{key}} : {{value}}
  </li>

</p>

AngularJS - ng-repeat 多维数组

AngularJS - ng-repeat multidimensional array

typescript

angularjs-ng-repeat