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

希望能帮助到你 ：）