Подписка на сервис как длина массива * ngFor

Question

У меня есть div с ngFor и кнопка внутри div, где он вызывает событие sat popover

<div *ngFor="let order of orders">
  <button mat-icon-button [satPopoverAnchorFor]="popover_address" (click)="openAddressView(order)">
   <mat-icon matTooltip="Edit Address" class="icon">edit_location</mat-icon>
  </button> 
</div>

<sat-popover (closed)="closeAddressView()" #popover_address horizontalAlign="end" hasBackdrop verticalAlign="center">
    <app-order-address></app-order-address>
</sat-popover>

в компоненте, вызывающем сервис

openAddressView(order: any){
    this.popover_address.open();
    this.ordersService.getAdddresses(order);
}

и подписаться на услугу следующим образом.

import { Component, OnInit, OnDestroy, Input, ChangeDetectorRef, 
ViewChild } from '@angular/core';
import { AgmMap, AgmMarker, AgmCoreModule } from '@agm/core';
import { MapsAPILoader } from '@agm/core';
import { OrdersService } from '../../../Services/orders- 
service/orders.service';
import { SatPopover } from '@ncstate/sat-popover';

@Component({
  selector: 'app-order-address',
  templateUrl: './order-address.component.html',
  styleUrls: ['./order-address.component.scss']
})
export class OrderAddressComponent implements OnDestroy {
  title: string = 'address';
  lat: number = 33.8950888;
  lng: number = 35.5186542;
  zoom: number = 8;
  height: string = '500px';
  addresses: Array<any>;
  selectedAddressId: number;
  @ViewChild(AgmMap) private myMap: any;
  @ViewChild('mapContainer') mapContainer: any;
  @ViewChild(AgmMarker) AddressPin: any;

 constructor(private OrdersService: OrdersService, private cdr: 
ChangeDetectorRef) {

  this.OrdersService.loadClientAddresses.subscribe((response: any) => {
    this.addresses = response.addresses;
    this.selectedAddressId = response.selected_address.id;
    this.recenterMap(response.selected_address.lat, 
    response.selected_address.lon);
    console.log(response); // PRINTS 10 TIMES
    this.cdr.detectChanges();
  });

}

Все работает хорошо, кроме случаев, когда я нажимаю на кнопку, чтобы открыть поповер. console.log печатается как длина объекта orders. ex (если у меня есть 10 заказов, он напечатает 10 раз)

Я хочу, чтобы он подписывался на услугу только при нажатии.

Answer 1

возможно, это потому, что у вас есть 10 экземпляров app-order-address. Компонент создает один app-order-address для каждого всплывающего окна, даже если всплывающее окно не запущено (?) ... (тестирование с именем console.log в начале метода constructor)

Если у вас 10 вызовов конструкторов, вы подписываетесь 10 раз. Поэтому, когда вы нажимаете одну кнопку, она запускает все 10 подписок.

Вы должны переместить некоторую логику в родительский компонент (возможно, искать также «sharedReplay» в rxjs)