display image for instanced select-box-CodePudding

I've created a mat-form-field within an formArray, which allows me to display an image inside the option tag of the select box.

Now I want to display to the left side of the filled inputfields the an image of the actor. Meaning the following: This is the component ts to update/edit a show information and it's episodes. I'm already showing a small preview of the image of the actor in the option field. What I'm trying to accomplish is once the actor is selected, to show a bigger image on the side of the input fields Actor/Char Name. Since a Show can have multiple actors "imgBig" is overwritten with the last selected actor for the Show. I somehow need to create duplicatable variable which I can access in the templates FormGroup. That way I can say imgBig i (i being the FormGroup index number) and it should show me the correct image

the html looks like this

<mat-form-field style="width: 100%;">
<mat-select  formControlName="cast" >
<mat-option  *ngFor="let c of actorList;let i=index;" value="{{c.imdbId}}"  style="height:60px;" >
{{c.combinedname}} || {{c.imdbId}}
</mat-option>
</mat-select>
</mat-form-field>  
<img src="{{imgBig}}" style="border-radius: 100%;"/>

The data I'm gettig from a json looks like this

I tried this within my typescript

export class EditShowComponent implements OnInit {

  imgBig :any;
  showForm: any
  showList:any = {}
  selectedShow_ = '';
  actorInfo:any;
  info:any;
  actorList:any = {};
  prevSelA :any = 0;
  prevSelEP :any = 0;
  epNr :any;
  epiIndex:number=0;

...
  setTitleValues(r:any){
    //console.log('valuesset start');
    console.log(r);
    //console.log('valuesset end');
    this.showForm.get('name_en').setValue(r[0].name_en);
    this.showForm.get('name_kr').setValue(r[0].name_kr);
    this.showForm.get('imdbId').setValue(this.selectedShow_);
    this.showForm.get('asianwiki').setValue(r[0].asianwiki);
    this.showForm.get('releasedate').setValue(r[0].releasedate);
    this.showForm.get('baseImg').setValue(r[0].baseImg);
    this.imgBig = r[0].imgBase;
    this.epiIndex = -1;
    if(this.prevSelA==0)
    {
      
      //console.log('if');
      
      this.prevSelA = this.sd.setActorCount(r[0][0].length);
      this.casts.removeAt(0);

    }
    else{
      //console.log ('else');
      this.prevSelA = this.sd.getActorCount();
      while (this.casts.length !== 0) {
        this.casts.removeAt(0);
      }

    if(this.prevSelEP==0)
    {
     
      this.prevSelEP= this.sd.setEpisodeCount(r[0].episodenZahl); 
      //this.casts.removeAt(0);
    }
    else{
      this.prevSelEP = this.sd.getEpisodeCount();
    }

    this.epNr = r[0].episodenZahl;
    while (this.episoden().length !== 0) {
      this.episoden().removeAt(0)
    }

    if(r[0][1])
    {
      for(let tt of r[0][1]){
        //console.log('E:::' tt.episode);
        this.addEpisode();
        var tIndex = tt.episode;
        tIndex = tIndex-1;
        
        this.createEpisodenDescDBdata(tIndex,tt)
        //this.descs(tt.episode).push(this.newEpisodeDecription());
      }
    }


    
    console.log('cast daten begin');
    console.log(r[0]);
    console.log('cast daten ende');
    //console.log(r[0]);
    
    for( let tt of r[0][0])
    {
      this.casts.push(this.buildExistingActor(tt.imdbCid,tt.alias,tt.imgBig));
    }
    //this.casts.removeAt(0);

  }  
...
  buildExistingActor(n:any, a:any,bild:any):UntypedFormGroup {
    this.imgBig = bild;
    console.log("actor name " n);
    console.log("actor alias " a);
    return this.fb.group({
      cast:[n],
      alias:[a],
      bigImg:[bild]
    })
  }
}

The image get's displayed next to the field but it's always the same image because it basically always overwrites the older img saved in the variable "imgBig" Any idea how I could solve this?

CodePudding user response：

It's not clear from your question, but I am guessing you want to show an image of each actor in mat options list.

The issue is you are always setting a single value for imgBig, as seen in the line this.imgBig = bild;.

What if you use imgBig or imgSmall fields from the actorList array. You can update the <mat-option> line to do following:

<mat-option  
 *ngFor="let c of actorList;let i=index;" value="{{c.imdbId}}"  style="height:60px;" >
 <img [src]="c.imgBig"> <span>{{c.combinedname}} || {{c.imdbId}}</span>
</mat-option>

CodePudding user response：

I had to create another variable as an array and fill the array with the imgBig value within the buildExistingActor method

export class EditShowComponent implements OnInit {
imgBigB: any =[];
...
setTitleValues(r:any){
    let k = 0;
    for( let tt of r[0][0])
    {
      this.casts.push(this.buildExistingActor(tt.imdbCid,tt.alias,tt.imgBig,k));
      k  ;
    }
    //this.casts.removeAt(0);

  }
... 


  buildExistingActor(n:any, a:any,bild:any,pos:any):UntypedFormGroup {
    this.imgBigB[pos]=bild;
    console.log('bigB START');
    console.log(this.imgBigB);
    console.log('bigB END')
    this.imgBig = bild;
    console.log("actor name " n);
    console.log("actor alias " a);
    return this.fb.group({
      cast:[n],
      alias:[a],
      bigImg:[bild]
    })
  }

this allowed me to access the correct Image in the template while using the formGroup index as the array index for the assigned image

<mat-form-field style="width: 100%;">
  <mat-select  formControlName="cast" >
    <mat-option  *ngFor="let c of actorList;let i=index;" value="{{c.imdbId}}"  style="height:60px;" >
        <img src="{{c.imgSmall}}" style="border-radius: 100%;"/>{{c.combinedname}} || {{c.imdbId}}
    </mat-option>
  </mat-select>
</mat-form-field>     
<img src="{{imgBigB[i]}}" style="border-radius: 100%;" height="150px" />