按角度日期對對象列表進行排序

Question

我想按日期對posts數組進行排序，但首先我想看看posts是否有對象， posts列表在 html 中正確顯示，但在console.log它看起來undefined 。 你能幫助我嗎？

post.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>

post.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));
}

與其對組件訂閱中的帖子進行排序，我更傾向於將邏輯保留在服務中並為此使用地圖，例如。

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)。