Блог

Главная - Вопросы по программированию - Создайте наблюдаемый дочерний объект с наблюдаемым родительским объектом Угловой

Создайте наблюдаемый дочерний объект с наблюдаемым родительским объектом Угловой

#c# #angular #rxjs

Вопрос:

Я работаю над проектом Angular, я пытаюсь заполнить свойство дочернего объекта его родителями с помощью оператора rxjs. Объекты выглядят так

 [
 {idSite:1,siteName:"Site of First Enseigne", enseigneId:1,enseigne: null},
 {idSite:1,siteName:"Site of Second Enseigne", enseigneId:2,enseigne: null},
]

[
 {idEnseigne:1,name:"First Enseigne", sites:[]},
 {idEnseigne:2,name:"Second Enseigne", sites:[]},
]

Я хотел бы получить сайты с их описаниями:

 [
 {
  idSite:1,
  siteName:"Site of First Enseigne", 
  enseigneId:1,
  enseigne: {idEnseigne:1,name:"First Enseigne", sites:[]}
 },
 {
  idSite:1,
  siteName:"Site of Second Enseigne", 
  enseigneId:2,
  enseigne: {idEnseigne:2,name:"Second Enseigne", sites:[]}
 },
]

Я пользуюсь сервисом сайта

 fetchAllSites() : Observable<Site[]>{ // which request all site in my API
    let url = `${this.provider}all`;
    return this.http.get<Site[]>(url);
}

И услуга enseigne, которая работает как услуга сайта

Я попытался заполнить все значения сайта из fetchAllSites этим методом, но, возможно, я делаю это неправильно

 export class DashboardComponent implements OnInit, {

  sites!: Site[]
  enseignes!: Enseigne[]

  ngOnInit(): void {
    this.LoadTabcomponent();

  }

  LoadTabcomponent(){
   this.siteService.fetchAllSites().pipe(
       map(sites => {
         sites.map( site => {
           this.enseigneService.getEnseignes().pipe(
             map( enseignes => {
               enseignes.map( enseigne => {
                 if(site.enseigneId === enseigne.idEnseigne){
                   site.enseigne = enseigne
                 }
               })
             })
           )
         })
       })
     ) 
  }

}

Мой веб-API на c#, я должен получить полный объект из API, но он не поддерживает сериализацию, потому что мне нужно завершить еще один объект, чтобы получить то, что я хочу, поэтому я пытаюсь создать объект в веб-приложении.

Ответ №1:

Вы можете попробовать использовать операторы combineLatest или forkJoin для объединения обоих результатов, например:

 combineLatest([
  this.siteService.fetchAllSites(),
  this.enseigneService.getEnseignes()
]).pipe(
  map([sites, enseignes] => {
    ... you merge code here
  })
).subscribe((sites)=> this.sites = sites);

Комментарии:

1. Спасибо за совет, решение хорошо работает с combineLatest и forkJoin. Я хотел бы добавить, что результат оператора будет недействительным, поэтому подписаться на значение, которое у меня было .subscribe((sites) => this.sites = sites as unknown as Site[]

Метки: