在Angular 4材质应用程序的md-autocomplete输入中获取id,可以通过以下步骤实现:
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 { }
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>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。请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云