在 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.

例如：下拉列表中的“A-Apple”，但選擇時僅顯示“A”。 我可以將值作為僅代碼傳遞，但無法在所選字段中單獨顯示為代碼。

Answer 1

正如 AhmerMH 所說，如果您可以更精確並共享一些代碼和其他一些信息，那就更好了。

這在很大程度上取決於您想要哪種類型的下拉菜單以及您的數據是如何制作的。 無論如何，我會向您展示一些可能會有所幫助的示例。

1. 如果您需要一個下拉菜單，例如 mat-menu，並且您的數據位於某些列表中，您可以使用以下內容：

下拉代碼和描述選項 2 選項 3 選項 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. 否則，如果您的意思是像表單字段這樣的下拉菜單，您可以有不同的情況，它始終取決於您的數據：

2.1 - 如果你有一小部分固定數據，你可以試試這個：

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

並相應地在您的 .TS 文件中，您可以將其定義為

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'},
]

和數據列表為：

<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 - 如果您的數據不固定，也許您必須從​​數據庫中獲取它們：

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);
} 

並在您的 .TS 文件中：

 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); }

希望能幫助到你 ：）