Question

我已经从api中获取了作者的名字以及他们的帖子。首先显示所有作者的姓名列表，然后显示所有帖子的列表。但我希望它显示作者姓名和他们各自的职位。我已经尝试了几种方法，但是没有用。请帮助我。这是我的代码

data.service.ts

       constructor(private http: HttpClient) {}

       getuserdetails(){
           return this.http.get<any> 
          ('http://jsonplaceholder.typicode.com/users')
          .pipe(map(item => {
           return item;
          }));
         }

      getposts() {
            return this.http.get<any> 
           ('http://jsonplaceholder.typicode.com/posts')
           .pipe(map(user => {
           return user;
         }));
         }

home.component.ts

      dataItem:any = {} 
      post:any = {} 

     constructor(private data: DataService) {

          this.data.getuserdetails().subscribe(item=>{
          this.dataItem=item;
        });

          this.data.getposts().subscribe(element=>{
          this.post=element;
       });

    }

home.component.html

   <div *ngIf="dataItem?.length>0">

      <div *ngFor='let x of dataItem'>
         {{x.name}}
      </div>

      <div *ngFor='let y of post'>
          {{y.body}} 
      </div>

   </div>

Answer 1

您可以等待两个可观察对象完成，然后执行逻辑

EXTRA_OECONF = "--enable-load-extension --disable-tcl  CFLAGS=-DSQLITE_HAS_CODEC"

Answer 2

您可以尝试创建自定义过滤器管道

<div *ngIf="dataItem?.length>0">

    <div *ngFor='let x of dataItem'>
    {{x.name}}
        <div *ngIf="post && post.length">
            <div *ngFor="let y of post | filter : x.id">
                {{y.body}} 
            </div>
        </div>
    </div>
</div>

管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(items: any[], userId: any): any[] {
        if(!items) return [];
        if(!userId) return items;
        return items.filter( it => it.userId == userId);
    }
}

还必须在某些模块中导入此过滤器管道，并将其添加到声明：[]中，然后导出：[]

如何以角度映射从Api提取的数据

2 个答案: