Angular - Display another part of the Object after selected in Select-CodePudding

I am displaying a few objects inside a select. But I want to show the user something different after selection than while picking his/her option. Is that even possible in Angular as it is in WPF?

My select looks like this:

<select  [(ngModel)]="rezept.kunde.versichertenstatus1" name="kunde_vstatus1">
   <option *ngFor="let vstatus of versichertenstatus1"[ngValue]="vstatus">
      {{vstatus.name}} - {{vstatus.kennung}}
   </option>
</select>

The Model:

export interface IVersichertenstatus{
    name: string;
    kennung: string;
}

The Key Problem is, that I want to show "kennung" and "name" while picking an option and only "kennung" afterwards. I also need ngValue to be the whole object and not just "kennung".

Cheers

CodePudding user response：

You can try this.

<select  [(ngModel)]="rezept.kunde.versichertenstatus1" name="kunde_vstatus1">
   <option *ngFor="let vstatus of versichertenstatus1"[ngValue]="vstatus">
      <span *ngIf="your-condition-to-show-name">{{vstatus.name}} -</span> {{vstatus.kennung}}
   </option>
</select>

I hope this help you, regards

CodePudding user response：

Thanks to @Carles Ramos!

I've set two events - and functions which change a boolean. This boolean is used for the *ngIf tag.

<select  
   [(ngModel)]="rezept.kunde.versichertenstatus1" 
   name="kunde_vstatus1" 
   (focus)="vselect_focus(1)" 
   (change)="vselect_focusout(1)">
   
   <option *ngFor="let vstatus of versichertenstatus1" [ngValue]="vstatus">
      <span *ngIf="selectedVersichertenstatus[0]">
         {{vstatus.name}} - 
      </span>
      {{vstatus.kennung}}
   </option>
</select>

The events look like this:

public selectedVersichertenstatus:boolean[] = [false, false, false];

vselect_focus(selector:number){
   this.selectedVersichertenstatus[selector-1] = true;
}

vselect_focusout(selector:number){
   this.selectedVersichertenstatus[selector-1] = false;
}