可以将HTTPClient与Angular中的RXJ组合组合

Question

I want to create a service that will hold the data received from REST API than emits it to whom ever needs it.
I used BehaviorSubject and managed to get the data in the template (using *ngFor) but whatever I tried, I can't get it in a component. The flow is that a some component calls fetchCustomersDetails than renders the data as a list.
Once the user clicks a customer, the name passed to another page where I wish to filter the data in the service and retrieve the match.
Examine the code shows that the name of the customer (from the list fetched in the service) is passed to getCustomerByCompanyName but the subject contain an empty array where the data needs to be saved.
I'm very new to Angular and it seems I'm missing some concept of using observables.
Thank you for your help.
Here is what I tried so far:

    /* Service */
    export class CustomerDetailsService {
      private apiUrl: string = `https://...`;
      private readonly customersDetailsPool$: BehaviorSubject<ICustomerDetails[]> = new BehaviorSubject<ICustomerDetails[]>([]);
    
      constructor(private http: HttpClient) { }
    
      fetchCustomersDetails(){
        return this.http.get<ICustomerDetails[]>(this.apiUrl)
          .subscribe({
            next: ((customerDetailsList: ICustomerDetails[]) => this.customersDetailsPool$.next(customerDetailsList)),
            error: ((error: any) => this.handleError(error)),
            complete: (() => console.log("test: ", this.customersDetailsPool$))
          })
      }
    
      get customersDetailsPool(): Observable<ICustomerDetails[]> {
        return this.customersDetailsPool$.asObservable();
      }
    
      getCustomerByCompanyName(name: string) {
        console.log("customersDetailsPool: ", this.customersDetailsPool$);
        return this.customersDetailsPool$.pipe(
          map((customers: ICustomerDetails[]) => {customers.find((customer) => {customer.company === name})})
        )
      }
    }

    /* component */
    @Component({
      selector: 'app-customer-edit-page',
      templateUrl: './customer-edit-page.component.html',
      styleUrls: ['./customer-edit-page.component.scss'],
      providers: [CustomerDetailsService]
    })
    
    export class CustomerEditPageComponent implements OnInit, AfterViewInit {
      @ViewChild(CustomerDetailsComponent)
      private customerNewDetails!: CustomerDetailsComponent;
      customerName: string | null = '';
      isEdit: boolean = false;
      customerDetails: ICustomerDetails = {
        company: '',
        contacts: [],
      };
      
      constructor(
        private router: Router,
        private route: ActivatedRoute,
        public customerDetailsService: CustomerDetailsService,
      ) { }
    
      ngOnInit(): void {
        this.customerName = this.route.snapshot.paramMap.get('company');
        this.isEdit = this.isToEdit();
        if (this.customerName) {
          this.customerDetailsService.getCustomerByCompanyName(this.customerName)
          .subscribe((customer) => {
            if (customer) {
              this.customerDetails = customer;
            }
          })
          .unsubscribe();
        }
      }
    }

Answer 1

查找调用中的语法错误。

customers.find((customer) => {customer.company === name})

这不会返回任何内容，要么添加返回或删除卷曲括号。

customers.find((customer) => {return customer.company === name})

或

customers.find((customer) => customer.company === name)

没有牙套，返回是隐式的。

设置它的方式，您还需要在某个时候调用fetchCustomerDetails（），并且您不能立即退缩，因为您不知道是否是的初始HTTP请求fetchcustomerDetails（）已经完成，除非您有未显示的机制。

---

我只是注意到您在周围的地图调用中遇到了相同的错误。卸下牙套或也添加在那里。

      map((customers: ICustomerDetails[]) =>
        customers.find((customer) => customer.company === name)
      )

---

如果您仍然有任何差异，这是一个工作模拟。

https://stackblitz.com/edit/angular-ivy-17tsrm?file=src/app/customer-details.service.ts

Answer 2

您会立即从服务中取消订阅，这可能正在创建一些异步时正式问题

删除unsubscribe（），而是使用takeuntil - 您可以查找<<代码>带有ngondestroy的takeuntil