Angular 下拉列表中的完整值不显示在角坐标中的mat选项中

我有一个来自文件

en_US_file.json

的对象数组，下面有

"streetList": [
      {
        "value": "",
        "street": ""
      },
      {
        "value": "AVE",
        "street": "Avenue"
      },
      {
        "value": "BLVD",
        "street": "Boulevard"
      },
      {
        "value": "CT",
        "street": "Court"
      }
      ]

在下拉列表中显示街道类型，如下所示

一旦我选择了例如：BLVD，所选内容如下所示，这很好

它的HTML代码如下所示

<div class="col col-4">
{{ interceptContext.streetType }}
<p>
<mat-select formControlName="streetType"(selectionChange)="onSelectChange($event.value)">
<mat-option *ngFor="let streetTypeObj of Contextlst.streetList" [value]="streetTypeObj.value">
{{streetTypeObj.value !== "" ? ((streetTypeObj.value === selectedOption) ? streetTypeObj.value  : streetTypeObj.value + ': ' + streetTypeObj.street) : ''}}
</mat-option>
</mat-select>
</p>
</div>

  onSelectChange(value: any) {
    this.selectedOption = value;
  }

this.Contextlst = en_US_file.streetList; // similar addition is ts to call the .json file

我想显示上面的下拉列表，但一旦我在AVE、BLVD、CT中选择了一些值。。。当我再次单击下拉列表时，显示如下

我不想，我想把整个区域显示为

BLVD:Boulevard

---

如何操作？

如果不想修改渲染选项，为什么要在模板插值中修改它们？您只需执行以下操作：

{{streetTypeObj.value+'：'+streetTypeObj.street}

。在这种情况下，显示屏将显示

BLVD:Boulevard

，而不是

BLVD

，我不希望发生这种情况。一旦我选择，我想显示

BLVD

，点击下拉菜单时，它应该显示

BLVD:Boulevard

@user9414660这是你想要的吗？@user9414660你能确认它是否为你工作吗