切片 Django API 结果时，角度切片 ( | slice:0:10 ) 不起作用

Question

我试图将 Django API 响应与 50 个结果进行切片，只显示 10 个结果，并且下面的代码似乎不起作用。错误：

(variable) post: unknown
Object is of type 'unknown'.

如果没有管道，它会显示 50 个结果。

<div class="news-row news-row-link" *ngFor="let post of Posts['results'] | slice:0:10">
      <div class="news-cells">
        <a href="{{ post['link'] }}" class="news-cell nc-date">
          <span>
            <time datetime="" title="Sun Sep 26 2021">{{ post['pub_date'] | timeAgo }}</time> <!---->
          </span>
          <!---->
        </a>
        <!----> 
        <a href="{{ post['link'] }}" class="news-cell nc-title">
          <span class="title-text">
            <!---->
            <span>{{ post['title'] }}</span>
          </span>
          <!---->
        </a>
        <!----> <!----> <!---->
      </div>
  </div>

我的 component.ts

  Posts:any = [];

  ngOnInit(): void {
    this.getAllPosts();
  }

  getAllPosts(){
    this.service.getAllPosts().subscribe(data=>{
      this.Posts = data;
    })
  }

我的 API 服务

export class APIService {

  readonly BaseAPI = 'http://127.0.0.1:8000/api/v1/'

  constructor( private http:HttpClient ) { }

  getAllPosts():Observable<any[]>{
    return this.http.get<any[]>(this.BaseAPI + 'posts/');
  }
}

Answer 1

您没有使用异步管道来显示 Post 的最新更新版本，因此这就是 html 只看到第一个空值的原因；

帖子：任意=[]； （为空）

使用BehaviorSubjects订阅新值，然后在html中使用async来更新html。您可以在此处了解 [AsyncPipe](https://angular.io/api/common/AsyncPipe.

将代码更改为

Post:BehaviorSubject= new BehaviorSubject(null);

然后当您从服务获取值时，只需推送到 Post

this.Post.next(data);

然后在 html 中，您可以使用异步管道显示最新发出的值

*ngFor="let post of (Posts['results'] | async ) | 切片:0:10"

干杯。