Question

我正在使用Angular 4创建一个简单的电影列表应用。我正在发出一个HTTP GET请求来获取存储在json文件中的所有电影。他们有一些字段，如“Id”，“标题”，“类型”，“持续时间”等。当我列出所有电影时，我如何通过ID降序来订购它们，以便最后一个出现？< / p>

这是我用来获取这个json数据的代码：

在我的数据服务文件中：

getMovies(){
      return this.http.get('assets/data/movies.json')
      .map(res => res.json());
   }

在我的component.ts文件中：

export class MainComponent implements OnInit {
  movies: Movies[];
  username:string;
  userimg:string;

  constructor(private userService:UserService, private dataService:DataService) { }

  ngOnInit() {

    this.dataService.getMovies().subscribe((movies) =>{
        this.movies = movies;
    });


  }


}

interface Movies {
    id:number,
    title:string,
    year:number,
    rating:number,
    cover:string,
    genre:string,
    duration:string,
    description:string,
    favourite:number
}

在我的component.html文件中：

<div *ngFor="let movie of movies" class="row row-movies">
              <a [routerLink]="['/movies', {'id': movie.id}]">
                <div class="col-md-9">
                    <h3> {{movie.title}}</h3>
                    <h4> {{movie.year}}</h4>
                    <h4> {{movie.rating}}</h4>
                    <p>{{movie.description}}</p>
                    <h5> {{movie.genre}}</h5>
                    <h5> {{movie.duration}}</h5>
                </div>
                <div class="col-md-3">
                  <img src="../assets/img/capas/movies/{{movie.capa}}" class="img-responsive capa-filme" width="350px" />
                </div>
              </a>
      </div>

你能帮帮我吗？我仍然非常喜欢Angular ..

Answer 1

这个问题与角度无关。加载电影后，你需要这样做：

this.movies.sort((a,b) => (b.id - a.id));

作为注释：这可以使用vanilla javascript中的任何数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

如果您不需要更改排序，则可以在检索数据时执行此操作。

this.dataService.getMovies().subscribe((movies) =>{
        movies.sort((a, b) => {
           return a.id < b.id ? 1 : -1;
     });
     this.movies = movies;
 });

注意：我没有语法检查。

订购Json对象

2 个答案: