Question

应该注意的是，我对Angular很新。

我从Django Rest Framework获得了以下JSON：

API /电影/ 1

    {
        "id": 1,
        "name": "Mr & Mrs Smith",
        "actors": [
            1,
            2,
        ]
    }

API /演员/ 1

    {
        "id": 1,
        "name": "Angelina Jolie",
    }

API /演员/ 2

    {
        "id": 2,
        "name": "Brad Pitt",
    }

我使用$ resource在Angular教程之后制作了一个电影详情页面。这是movie-detail.component.js

angular.
  module('movieDetail').
  component('movieDetail', {
    templateUrl: 'static/partials/movie-detail/movie-detail.template.html',
    controller: [ '$routeParams', 'Movie', 
      function MovieDetailController($routeParams, Movie) {
        var self = this;
          self.movie= Movie.get({movieId: $routeParams.movieId})
      }
    ]
  });

在电影HTML模板中，我可以通过“$ ctrl.movie.actors”访问“actors”id。但是我无法弄清楚是否有办法使用这个id向服务器询问'actor'对象。就像是： Actor.get（{id}）将它们合并到电影细节模板中。

TL; DR 我现在能做什么：

Actors:
    <ul>
       <ling-repeat="actor in $ctrl.movie.actors"> {{actor}} </li>
    </ul>

结果：

演员


1

2

我想要的是：

Actors:
    <ul>
       <ling-repeat="actor in $ctrl.movie.actors"> {{actor.name}} </li>
    </ul>

结果：

演员


Angelina Jolie

布拉德皮特

如何实现这一目标？

感谢您的回复！

Answer 1

首先，你使用Angularjs 2和Angularjs 2与Angularjs 1. *不同。

在这种情况下，它更多的javascript对象操作而非Angularjs技巧

您可以尝试以下方法来实现此目标

<强>选项1：

如果你能够在Django中编辑你的休息调用，请更改你的代码以在这样的一个js中返回电影和演员的详细信息

{
    "id": 1,
    "name": "Mr & Mrs Smith",
    "actors": [
        1: {"id": 1,"name": "Angelina Jolie"},
        2: {"id": 1,"name": "Angelina Jolie"},
    ]
 }

尝试为电影下的演员对象重复重复。或者您可以将这两个电话分开作为您的要求。

<强>选项2：

您需要在加载时进行延迟加载。一旦你的电影对象被加载，你需要调用actor rest url来获取所需的所有actor对象，如果你不能进行一次休息调用，则将它们附加到现有对象中。然后在模板中你可以显示如上所述的actor详细信息

如何在角度JS模板中获取相关对象？

1 个答案: