要实现Angular MatOptGroup的自动完成与嵌套的JSON结构,可以按照以下步骤进行操作:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
@Component({
selector: 'app-autocomplete',
templateUrl: './autocomplete.component.html',
styleUrls: ['./autocomplete.component.css']
})
export class AutocompleteComponent {
searchControl = new FormControl();
options: any[] = [
{
category: 'Fruits',
items: [
{ name: 'Apple' },
{ name: 'Banana' },
{ name: 'Orange' }
]
},
{
category: 'Vegetables',
items: [
{ name: 'Carrot' },
{ name: 'Broccoli' },
{ name: 'Lettuce' }
]
}
];
selectedOption: any;
onOptionSelected(event: MatAutocompleteSelectedEvent) {
this.selectedOption = event.option.value;
}
}
{{item.name}}
.mat-form-field {
width: 300px;
}
这样,当用户在输入框中输入文字时,会根据嵌套的JSON结构自动完成,并且选中的选项会保存在selectedOption变量中。
希望以上解决方法对你有帮助!