Html 角度8选择时更改值

我使用的是Angular 8，我有一个下拉列表，如下所示：

国家：

• 美国-美国-英国
• 英国-英国
• 香港-香港

---

当我从下拉列表中选择一个值时，我只想显示前两个字符。例如，如果我选择美国，我只想显示“我们”。在我的“选项”中，我使用

*ngFor

显示数据，您可以使用

mat select trigger

，如文档所示：

国家
{{getLabelForCountry（）}}
{{国家}

这段代码只是一个模板的示例。由于您没有发布有关代码的更多详细信息（如果您使用的是重新激活表单或不是数据结构），因此需要根据您的实际情况对其进行调整。但这是你可以遵循的方法

{{country.split（''）.map（x=>x[0]）.join（''）}

但是在这样的模板中嵌入逻辑并不好，因此您最好在组件上定义一个方法来获取字母：

公共国家标签（国家：字符串）：字符串{
返回国家/地区.split（“”）.map（x=>x[0]）.join（“”）；
}

然后像这样使用它：

{{countryLabel（country）}

是否使用角材料/组件？是。我正在尝试不同的方法来实现这一点，但我需要有人告诉我正确的方向

<mat-form-field>
  <mat-label>Countries</mat-label>
  <mat-select [formControl]="country" multiple>
    <mat-select-trigger>
      {{ getLabelForCountry() }}
    </mat-select-trigger>
    <mat-option *ngFor="let country of countries" [value]="country">{{country}}</mat-option>
  </mat-select>
</mat-form-field>