Блог

Редактировать: Я решил проблему, это было потому, что я получал данные из модального компонента, который изменял порядок непосредственно внутри этого компонента. Я все еще не до конца уверен, почему это повлияло на компонент брата и сестры, поэтому, если кто-нибудь может объяснить, я был бы признателен, но на данный момент, похоже, проблема решена.

Я работаю над относительно крупным проектом, pwa для электронной коммерции, если быть точным. У меня есть страница заказов, на которой клиенты могут просматривать заказы, недавно я заметил некоторое странное поведение, возникающее в результате того, что при запуске события вывода из дочернего компонента родительский элемент пытается обновить дочерние представления. Кажется, я не могу понять, почему это происходит, поскольку, насколько я понимаю, это должно происходить только при изменении свойства, связанного с входными данными. Я все еще новичок в angular, поэтому, возможно, я что-то неправильно понимаю, поэтому, если у вас есть какое-либо представление, пожалуйста, предоставьте его. Я предоставлю соответствующий код, если вы считаете, что требуется больше, пожалуйста, дайте мне знать, и я смогу предоставить более подробную информацию.

html-режим из дочернего представления строка заказа-компонент нажмите кнопку событие вкл. запускает событие вывода из этого компонента в родительский

 <div *ngIf="loaded" class="orderWrapper mx-auto">
  <div class="d-flex cardHeader" style="justify-content: flex-start">
    <div class="orderlineHeader">
      <p class="">Order Placed</p>
      <p>{{ order.orderCreated | date: "medium":"locale" }}</p>
    </div>
    <div class="orderlineHeader">
      <p>Total</p>
      <p>{{ order.totalCost | currency }}</p>
    </div>
    <div class="orderlineHeader" style="margin-left: auto">
      <p>Order# {{ order.orderId }}</p>
      <button
        class="btn btn-link"
        (click)="viewOrderDetail()"
        data-bs-target="#orderDetailModal"
        data-bs-toggle="modal"
        style="padding-left: 0 !important; color :whitesmoke"
      >
        View Order Details
      </button>      
    </div>
  </div>
...

<div *ngFor="let ol of order.orderLines">
    <div class="d-flex orderlineRow">
      <div class="my-auto">
        <div class="imgWrapper">
          <img
            class="olImg"
            [src]="
              'https://f002.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId='  
              ol.productImg[0].imgid
            "
          />
        </div>
 

строка заказа-компонент

 export class MyOrderlineComponent implements OnInit 
{

  loaded = false;
  orderTotal = 0.0;
  @Input() order :Order = new Order();
  @Output() productForReview :EventEmitter<string> = new EventEmitter();
  @Output() orderForDetails :EventEmitter<Order> = new EventEmitter();

  constructor(
    private productService :ProductService
  ) { }

  
  ngOnInit(): void 
  {
    this.loaded = false;
    console.log(this.order)
    this.fetchProductImg();
  }
  
  fetchProductImg() :void
  {
    let observables = [];

    for(let o of this.order.orderLines)
    {
      observables.push(this.productService.fetchProductImages(o.productId.toString()));
    }

    forkJoin(observables)
    .subscribe(dataArray =>
    {
      console.log(dataArray);
      for(let i = 0; i < dataArray.length; i  )
      {
        this.order.orderLines[i].productImg = dataArray[i]
      }
      console.log(this.order)
      this.loaded = true;
    }, (error) =>
    {
      console.log(error)
    })
  }

  selectProductForReview(productId) :void
  {
    this.productForReview.emit(productId);    
  }

  viewOrderDetail() :void
  {
    this.orderForDetails.emit(this.order); //this is the output triggered by the     
                                         //button
  }

}
 

родительский html

 <div class="accordion-body">
              <div class="newOrders" *ngIf="pastOrders.length > 0">
                <app-my-orderline
                  *ngFor="let order of pastOrders"
                  [order]="order"
                  (productForReview)="handleReviewSelect($event)"
                  (orderForDetails)="handleViewOrderDetails($event)"
                ></app-my-orderline>
              </div>

<app-my-view-order-modal [order]='orderDetailsView' (orderCancelled)='orderCancelledListener($event)' ></app-my-view-order-modal>
 

прослушиватель родительских событий

 handleViewOrderDetails(order :Order) :void
  {
    console.log(order);
    this.orderDetailsView = order;
  }

 

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

он попытался повторно отобразить все представления компонентов строки заказа

Но я не понимаю, почему это происходит.

Спасибо.