angular - 按 Angular 按日期对对象列表进行排序

Question

我想按日期对 posts 数组进行排序，但首先我想看看 posts 中是否有对象，帖子列表是否正确显示在html 但在 console.log 中它看起来是 undefined。你能帮帮我吗？

posts.component.ts

import { Component, OnInit } from '@angular/core';
import { Post } from '../post';
import { LoginService } from '../login.service';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { PostsService} from '../posts.service';
import { registerLocaleData } from '@angular/common';
import localeIt from '@angular/common/locales/it';

registerLocaleData(localeIt, 'it');

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {

  constructor(private loginservice: LoginService,
              private location: Location,
              private postsservice: PostsService) {}
  posts: Post[];
  postDetail(id: number){}

  ngOnInit() {
    this.getPosts();
    console.log(this.posts);
  }

 getPosts(): void {

   this.postsservice.getPosts()
   .subscribe(posts=>this.posts=posts);

 }


}

post.component.html

<div>
<ul>
  <li *ngFor="let post of posts">
    <p>{{ post.title }}</p>
    <p>written by {{ post.author }}  {{ post.date | date:'medium':'':''}}
      <a class="details" routerLink="/detail/{{post.id}}">></a>
    </p>
    <br>
  </li>
</ul>
</div>

posts.service.ts

import { Injectable } from '@angular/core';
import { Post } from './post';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class PostsService {

  private postsUrl = 'api/posts';  // URL to web api
  posts = [];

  constructor(private http: HttpClient) { }

  /** GET posts from the server */
  getPosts (): Observable<Post[]> {
    return this.http.get<Post[]>(this.postsUrl)
  }

  getPost(id: number): Observable<Post> {
    const url = `${this.postsUrl}/${id}`;
    return this.http.get<Post>(url);
  }

  /** PUT: update the post on the server */
  updatePost (post: Post): Observable<any> {
    return this.http.put(this.postsUrl, post, httpOptions);
  }

  /** POST: add a new post to the server */
  addPost (post: Post): Observable<Post> {
    return this.http.post<Post>(this.postsUrl, post, httpOptions);
  }
  /** DELETE: delete the post from the server */
  deletePost (post: Post | number): Observable<Post> {
    const id = typeof post === 'number' ? post : post.id;
    const url = `${this.postsUrl}/${id}`;

    return this.http.delete<Post>(url, httpOptions);
  }
}

Answer 1

如果您想检查是否有帖子，您可以使用过滤器。这样，当您订阅可观察对象时，您不需要任何逻辑。

getPosts (): Observable<Post[]> {
    return this.http.get<Post[]>(this.postsUrl)
           .pipe(filter(posts => posts && posts.length > 0));
}

与其在组件的订阅中对帖子进行排序，我更倾向于将逻辑保留在服务中并为此使用 map ，例如。

getPosts (): Observable<Post[]> {
    return this.http.get<Post[]>(this.postsUrl)
           .pipe(
                filter(posts => posts && posts.length > 0),
                map(posts => sortBy(posts, ['date'])
            );
}

在上面的示例中，我只使用了 lodash sortBy 语法，但您可以在映射中使用任何您想要的方法来返回排序后的数组。如果您在其他地方需要未排序的帖子，您可以使用单独的 getSortedPosts 方法，或将参数传递给 getPosts(sortBy)。