check in display image using api now

UI/src/app/person/familylist.ts

@@ -38,25 +38,25 @@ export class FamilyList implements OnInit, OnDestroy{
   //private cd = inject(ChangeDetectorRef);
     items: MenuItem[] | undefined;
     selectedPerson!: Person;
-  firstname = '';
-  email = '';
-  lastname = '';
-  _id = -10;
-  selectId = -1;
-  loading = false;
-  familyList = signal<Person[]>([]);
-  msg ="[Person component]";
-  @ViewChild(Table) dt2!: Table;
-   @ViewChild('rowmenu') popMenu?: Menu;
- private messageService = inject(MessageService);
-   public dialogService= inject( DialogService);
+    firstname = '';
+    email = '';
+    lastname = '';
+    _id = -10;
+    selectId = -1;
+    loading = false;
+    familyList = signal<Person[]>([]);
+    msg ="[Person component]";
+    @ViewChild(Table) dt2!: Table;
+    @ViewChild('rowmenu') popMenu?: Menu;
+    private messageService = inject(MessageService);
+    public dialogService= inject( DialogService);
     private personService= inject( PersonService);
     private confirmationService = inject(ConfirmationService);
-    private cd = inject(ChangeDetectorRef);
+    private cdr = inject(ChangeDetectorRef);
     private authenticationService= inject( AuthenticationService);
     private router= inject( Router);
-  constructor() {}
-     getSearchCiteria(): StaffSearch {
+  
+    getSearchCiteria(): StaffSearch {
     let criteria:StaffSearch = {
       email: this.email,
       firstName: this.firstname,
@@ -182,7 +182,7 @@ export class FamilyList implements OnInit, OnDestroy{
         
          console.log("the person from load", this.familyList());
         this.loading = false;
-        this.cd.detectChanges();
+        this.cdr.detectChanges();
       }, 
       error: e => {      
       const message = e || e.message;
@@ -250,6 +250,7 @@ export class FamilyList implements OnInit, OnDestroy{
       
       const nlist = this.familyList().filter(d => d.id !== id);
       this.familyList.set(nlist);    
+       this.cdr.detectChanges();
       },
       error: e => console.error(e)
     });
@@ -311,19 +312,21 @@ export class FamilyList implements OnInit, OnDestroy{
    }
 
    updateList(item: Person) :void {
-    const idx = this.familyList().findIndex( x => x.id == item.id);
+    const list = this.familyList();
+    const idx = list.findIndex( x => x.id === item.id);
     if (item.fatherId && item.fatherId > 0)
       item.fatherName = this.getName(item.fatherId);
       if (item.motherId && item.motherId > 0)
       item.motherName = this.getName(item.motherId);
     if (idx < 0)
     {      
-      const olist = [... this.familyList(), item];
+      const olist = [... list, item];
       this.familyList.set(olist);
     }
     else
     {
-      const oitem = this.familyList()[idx];
+      
+      const oitem = list[idx];
       oitem.firstName = item.firstName;
       oitem.lastName = item.lastName;
       oitem.address = item.address;
@@ -335,7 +338,9 @@ export class FamilyList implements OnInit, OnDestroy{
       oitem.motherId = item.motherId;
       oitem.fatherName = item.fatherName;
       oitem.motherName = item.motherName;      
+      this.familyList.set(list);
     }
+    this.cdr.markForCheck();
    }