时间戳

首页 > 解决方案 > 订阅服务作为 *ngFor 数组的长度

javascript - 订阅服务作为 *ngFor 数组的长度

问题描述

我有一个带有 ngFor 的 div 和一个在 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 打印为订单对象的长度。例如（如果我有 10 个订单，它将打印 10 次）

我希望它仅在单击时订阅该服务。

标签： javascripthtmlangularangular-material

解决方案

可能是因为您有 10 个 app-order-address 实例。即使未触发弹出窗口，组件也会为每个弹出窗口构造一个应用程序订单地址（？）...（在“构造函数”方法的顶部使用“console.log”进行测试）

如果您有 10 个构造函数调用，则您有 10 次订阅。因此，当您单击一个按钮时，它会触发所有 10 个订阅。

您应该在父组件中移动一些逻辑（也许还要在 rxjs 中寻找“sharedReplay”）

推荐阅读