在 Angular 中选择下拉菜单

Question

I want to create a drop-down that shows options as "code-description" but when the option is selected display only "code" in the selected field.

Eg : "A-Apple" in the drop-down, but display only "A" when selected. I can pass the value as only code but unable to display it as code alone in the selected field.

Answer 1

As said from AhmerMH, it would be better if you can be more precise and share some code and some other information.

It depends a lot from which type of drop down you want and how your data are made. Anyway, i'll show you some examples that maybe can help.

1. If you need a drop down menu, like mat-menu, and your data reside in some lists, you can use something like:

Drop Down Codes and Descriptions option 2 option 3 option 4

 <mat-menu #moreOptions="matMenu"> //it depends on how the objects you want to display are made //if code and description are in the same object: <div *ngFor="let c of codesList; index as i"> <button mat-menu-item>{{c.code}} {{c.description}}</button> </div> //otherwise, if code and description are separated: (if codes are in "codesList" and descriptions are in "descsList" and if descsList is ordered in the same way of codesList) <div *ngFor="let c of codesList; index as i"> <button mat-menu-item>{{c}} {{descsList[i]}}</button> </div> </mat-menu>

2. Otherwise if you mean a drop down like a form-field you can have different cases, it always depends on your data:

2.1 - if you have a small bunch of fixed data you can try with this:

form = this.fb.group({
    data: [''],
})

and correspondingly in your .TS file, you can define it in the form as

referenceData = [
{code: 'Code One', description: 'Desc One', value: 'first_value'},
{code: 'Code Two', description: 'Desc Two', value: 'second_value'},
{code: 'Code Three', description: 'Desc Three', value: 'third_value'},
]

and the list of data as:

<div class="row">
    <div class="col">
        <mat-form-field class="" appearance="outline" hideRequiredMarker formGroupName="data" *ngIf="data$ | async as datas"> 
            <mat-label class="font-18-semi-b">Codes and Descriptions</mat-label>
            <input matInput formControlName="id" placeholder="Data">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayData(datas)" (optionSelected)="dataChanged($event.option.value)">
                <mat-option *ngFor="let d of datas" [value]="d.id">
                    {{d.code}} {{d.description}}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
</div>

2.2 - if your data are not fixed and maybe you have to get them from a DB:

form = this.fb.group({
    data: this.fb.group({
        id: ['',],
      }),
})

data$: Observable<Data>;

displayData(datas: Data[]) {   
    return (dataId?: number): string | undefined => {
      let data = datas.find(option => option.id === dataId);
      return data ? data.code + " " + data.description : undefined
    };
}
  
dataChanged(event){
    this.dataService.get(event).pipe( //your service that you use to get the data from the server
      tap((value:Data) => {
        //do what you want, like:
        var selectedData = value; 
      })
    ).subscribe();
    this.form.get("data.id").setValue(event);
} 

and in your .TS file:

 form = this.fb.group({ data: this.fb.group({ id: ['',], }), }) data$: Observable<Data>; displayData(datas: Data[]) { return (dataId?: number): string | undefined => { let data = datas.find(option => option.id === dataId); return data ? data.code + " " + data.description : undefined }; } dataChanged(event){ this.dataService.get(event).pipe( //your service that you use to get the data from the server tap((value:Data) => { //do what you want, like: var selectedData = value; }) ).subscribe(); this.form.get("data.id").setValue(event); }

Hope it helps :)