javascript - Angular renderar inte om vyn efter att relaterat modellvärde ändrats

Jag gör en enkel Angular-app. Jag har 2 modeller nedan

class Customer implements ICustomer
{
    id?: number | null | undefined;
    name: string | null;
    addr: string | null;
    tel: string | null;
    postCode: string | null;
    defaultBrand: number | null;
    defaultLogistic: number | null;
    createdOn: string | null;
    updatedOn: string | null;
}

och

class Brand implements IBrand {

  id?: number | undefined;
  name: string = "";
  shortName: string = "";
  imgPath: string = "";
  isEnable?: boolean | undefined = false;
  createdOn: string = "";
  updatedOn: string = "";
}

Så relationen är att Kunden har 1 märke (lagra som märke-id)

sedan i kundhanteringsvyn har jag en tabell som visar varumärkets namn och jag använder ngBootstrap-modal för uppdateringsvyn

Så, problemet är att efter att jag uppdaterade märket på modalet upptäckte jag att kundtabellen inte uppdaterades, den har fortfarande det tidigare värdet. Hur korrigerar jag detta värde?

Här är några av mina customer-row.component.ts

  ngOnInit(): void {
    this.setBrand();
    this.setLogistic();
  }

  setBrand(): void {
    this.brand = this.brandService.brandList.find(x => x.id === this.item.defaultBrand);
  }

  setLogistic(): void {
    this.logistic = this.logisticService.LogicticList.find(x => x.id === this.item.defaultLogistic);
  }

  onEditClick(): void {
    this.modalRef = this.modal.open(CustomerModalUpdateComponent, {
      animation: true,
      size: 'xl',
      backdrop: 'static'
    });
    this.modalRef.componentInstance.title = `${this.item.name}`;
    this.modalRef.componentInstance.item = this.item;
    this.modalRef.closed.subscribe((result:any) => {
      this.setBrand();
      this.setLogistic();
      this.changeDetectRef.detectChanges();
    });
  }

och här är några av mina customer-row.component.html

 <td class="text-center">
    {{ this.brand?.name }}
  </td>
  <td class="text-center">
    {{ this.logistic?.name }}
  </td>

Svar #1

Detta kanske inte löser problemet, men försök att tilldela variablerna till nya platser i minnet så att ändringsdetektering sker.

Prova detta:

setBrand(): void {
    this.brand = { ...this.brandService.brandList.find(x => x.id === this.item.defaultBrand) };
  }

  setLogistic(): void {
    this.logistic = { ...this.logisticService.LogicticList.find(x => x.id === this.item.defaultLogistic) };
  }

Svar #2

Jag löser problemet genom att implementera ngOnChanges-koden nedan

  ngOnChanges(changes: SimpleChanges): void {
    this.setBrand();
    this.setLogistic();
  }

Jag är inte säker på att detta är ett korrekt sätt, men det kan lösa mitt problem