Angular Ngx引导类型前置值文本分隔？

Im使用ngx引导实现提前输入下拉列表

我已经从文档中创建了一个示例，但我无法给出值并显示不同的文本

我有一张这样的清单

{id:1，名称：'Alabama'，值：'1'，区域：'South'}，
{id:2，名称：'Alaska abc'，值：'2'，区域：'West'}，
{id:3，名称：'Arizona cdf'，值：'3'，区域：'West'}，
{id:4，名称：'Arkansas efg'，值：'4'，区域：'South'}，
{id:5，名称：'Alaska2 hij'，值：'5'，区域：'West'}

当用户在下拉列表中选择时，它应该显示名称，但在ng模型中，我需要像1、2、3这样的值

但是使用这个ngx引导程序，我无法将这两者分开

我甚至尝试使用ngx模板，但在ui的最后，它将显示值而不是文本

---

使用ngx引导onSelect方法获取所选值的对象。 例如：

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl，FormGroup}；
从“ngx引导/typeahead/typeahead”导入{TypeaheadMatch}
匹配类'；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
选择性选择；
groupSelected={name:'Alabama'，值：1}；
statesComplex:任意[]=[
{id:1，名称：'Alabama'，值：1，区域：'South'}，
{id:2，名称：'Alaska'，值：2，区域：'West'}，
{id:3，名称：'Arizona'，值：3，区域：'West'}，
{id:4，名称：'Arkansas'，值：4，区域：'South'}，
{id:5，名称：'California'，值：5，区域：'West'}，
];
onSelect（事件：TypeaheadMatch）：无效{
this.selectedOption=event.item；
this.groupSelected.name=event.item.name；
this.groupSelected.value=event.item.value；
}
}

html中的更改：

模型：
{{groupSelected.value | json}}

尝试使用typeahead选项：

Model:{{selectedValue | json}
所选选项：{selectedOption | json}

在组件中添加：

onSelect（事件：TypeaheadMatch）：无效{
this.selectedOption=event.item；
}

希望这能有所帮助，

组件。ts

导出类AppComponent{
选定的公共组：string=“Alabama”；
公共项目：州={id:1，名称：'Alabama'，值：'1'，地区：'South'}；
公共状态复杂：状态[]=[
{id:1，名称：'Alabama'，值：'1'，区域：'South'}，
{id:2，名称：'阿拉斯加'，值：'2'，区域：'西部'}，
{id:3，名称：'Arizona'，值：'3'，区域：'West'}，
{id:4，名称：'Arkansas'，值：'4'，区域：'South'}，
{id:5，名称：'California'，值：'5'，区域：'West'}，
];
公共值：any=this.statesComplex[0]；
onSelect（）{
var i=0；
while（i

component.html

Model:{{item.id}{{groupSelected}json}

---

示例无效

change in ts :