按名称选择et在angular 4材质应用程序的md-autocomplete输入中获取id

在Angular 4材质应用程序的md-autocomplete输入中获取id，可以通过以下步骤实现：

1. 首先，在Angular 4应用程序中安装和引入Angular Material库。可以通过以下命令安装：npm install --save @angular/material @angular/cdk @angular/animations
2. 在Angular应用程序的模块中导入所需的Angular Material模块。在app.module.ts文件中添加以下代码：import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatInputModule } from '@angular/material/input'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

 imports: [

   // 其他导入的模块...

   BrowserAnimationsModule,

   MatAutocompleteModule,

   MatInputModule

 ],

 // 其他配置...

})

export class AppModule { }

1. 在组件的HTML模板中，使用md-autocomplete指令创建自动完成输入框，并绑定相应的属性和事件。例如：<mat-form-field> <input type="text" matInput [matAutocomplete]="auto" [(ngModel)]="selectedItem"> <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)"> <mat-option *ngFor="let item of items" [value]="item.id"> {{ item.name }} </mat-option> </mat-autocomplete> </mat-form-field>
2. 在组件的TypeScript代码中，定义items数组来存储可选项的数据，并在onOptionSelected方法中获取选中项的id。例如：import { Component } from '@angular/core';

@Component({

 selector: 'app-example',

 templateUrl: './example.component.html',

 styleUrls: ['./example.component.css']

})

export class ExampleComponent {

 items = [

   { id: 1, name: 'Item 1' },

   { id: 2, name: 'Item 2' },

   { id: 3, name: 'Item 3' }

 ];

 selectedItem: number;

 onOptionSelected(event: any) {

   console.log(event.option.value); // 获取选中项的id

 }

}

通过以上步骤，你可以在Angular 4材质应用程序的md-autocomplete输入中获取选中项的id。请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网
• 腾讯云云服务器（CVM）
• 腾讯云云数据库 MySQL 版
• 腾讯云对象存储（COS）
• 腾讯云人工智能
• 腾讯云物联网（IoT）
• 腾讯云移动开发
• 腾讯云区块链
• 腾讯云元宇宙