Блог

Я извлек имена авторов вместе с их сообщениями из 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>
 

Вы можете дождаться завершения обоих наблюдаемых, а затем выполнить свою логику

  constructor(private data: DataService) {
         zip(this.data.getuserdetails(),this.data.getposts()).subscribe((results)=> 
          {
             this.dataItem = results[0];
             this.post = results[1];
          });

        });


       });
 

Вы можете попробовать создать пользовательский канал фильтрации

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

    <div *ngFor='let x of dataItem'>
    {{x.name}}
        <div *ngIf="post amp;amp; 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);
    }
}
 

Также вы должны импортировать этот канал фильтра в какой-либо модуль и добавить его в объявления: [] и экспорт: []