Angular: Add data to a specific angular material table row

Question

I'm struggling on this error about 2 days and found nothing, Please Need your help.

Let me explain the flow of the work, I'm working on a simple project with angular and spring boot, and I'm exposing a search api that handle a query passed by the client. This data that comes from the backend I need to share it with 2 components, first component is the ActorComponent this component it's job is to make that call to the search api and show actors that are coming from MySQL after that every actor has a button add which will be added to the specific row in InboxComponent, this component has only a table that shows data, so in this table I have a column called Actor each cell should be carry the actor that has been clicked in add button. My issue is that when I earch and then click add button it shows all the actors that are in DB in that cell clicked.

This is my Actor table:

image: Actor table in DB

service that call the api:

    private baseUrlSearchActeur = 'http://localhost:8081/api/v1/search/mockacteurs?query=';
searchedActeur(value: string): Observable<any>{
        const acteurUrl = `${this.baseUrlSearchActeur}${value}`;
        return this.httpClient.get(acteurUrl).pipe(
            map((response: any) => response)
        );
    }

Shared services that pass the actor selected from ActorComponent to InboxComponent cell:

export class SharedServiceService {

    public _acteursSource: BehaviorSubject<Acteur[] | null> = new BehaviorSubject(null);
    public _acteursCurrent= this._acteursSource.asObservable();

    constructor() { }


    public changeActeurs(acteurs: Acteur[]): void {
      this._acteursSource.next(acteurs);
    }
}

ActorComponent.html:

// this input carry the query to MySQL
            <input #myInput (keyup.enter)="searchedActeur(myInput.value)" type="text">
// this button makes the GET request
            <button (click)="searchedActeur(myInput.value)"> Search </button>
        
// this button that pass that actor to the table
            <button matDialogClose (click)="onCLick(acteur.acteurId)"> Add </button>

ActorComponent.ts:

  ngOnInit(): void {
      this._sharedService._acteursCurrent.subscribe(
          (acteurs) => {
              this._acteurs = acteurs;
          }
      );
  }


  public onCLick(selectedActeurId): void {
      this._acteurs.forEach((acteur) => {
          if (acteur.acteurId === selectedActeurId) {
              acteur.ligneReleve = this.data.selectedLigneReleve;
          }
      });

      this._sharedService.changeActeurs(this._acteurs);
  }
    async searchedActeur(value: string){
      this._releveBancaireService.searchedActeur(value).pipe(takeUntil(this._unsubscribeAll), debounceTime(300)).subscribe(
          (data) => {
              this._shownActeurs = this._acteurs.filter(acteur => acteur.nomActeur.toLowerCase() === value || acteur.prenomActeur.toLowerCase() === value);
              this._changeDetectorRef.markForCheck();
              this.peopleLoaded = true;

              console.log('consoling this._shownActeurs ', this._shownActeurs);
          }
      );
    }

InboxComponent.html: (this file is little bit longer but I'l try to cut the necessary elements)

<table
     class="w-full bg-transparent"
     mat-table
     matSort
     [dataSource]= "dataSource">

<ng-container matColumnDef="acteur">
       <th mat-header-cell mat-sort-header *matHeaderCellDef> Acteur </th>
       <td mat-cell *matCellDef="let ligneReleve">
       <span *ngFor="let acteur of _acteurs>
       <div *ngIf="acteur.ligneReleve && acteur.ligneReleve.ligneReleveId === ligneReleve.ligneReleveId">
<p>{{acteur.nomActeur}} {{acteur.prenomActeur}}</p>
       </td>
</ng-container>


<ng-container matColumnDef="qualifierActeur">
     <th mat-header-cell mat-sort-header *matHeaderCellDef> Qualifier Acteur </th>
     <td mat-cell *matCellDef="let ligneReleve"> 
    <button (click)="qualifierActeur(ligneReleve.ligneReleveId)"> </button>
    </td>
</ng-container>

 </table>

InboxComponent.ts:

 ngOnInit(): void {

      this._relebeBancaireService.searchedActeur('').pipe(takeUntil(this._unsubscribeAll), debounceTime(300)).subscribe(
          (data) => {
              this._acteurs = data;
              this._sharedService.changeActeurs(this._acteurs);
          });

}



recieveActeur(): void {
        this._sharedService._acteursCurrent.subscribe(

            acteurs => (this._acteurs = acteurs)
        );

    }
 qualifierActeur(ligneReleveId: number): void
    {
        let _ligneReleveId: number |null = null;
        let _data: any;

        this.ligneReleves.map((l) => {
            _ligneReleveId= l.ligneReleveId;
        });

        this._relebeBancaireService.getReleveBancaireById(this.task.releveBancaireId)
        .subscribe((data) => {
            _data=data;
            this.selectedLigneReleve = data.lignereleve.find(i => i.ligneReleveId === ligneReleveId);

        this._matDialog.open(ActorComponent, {
            autoFocus: false,
            data: {
                selectedLigneReleve: this.selectedLigneReleve
            }
        });
    });
    }

Pictures:

InboxComponent.html (material table)

enter image description here

ActorComponent (MatDialog):

enter image description here

Final Result (as you can see it adds all the data presented in database in one cell)

enter image description here