如何使用Angular 7在mat select触发器标记内显示选定选项名称

我试图在selectbox中显示潜台词，如下面的屏幕截图所示

my.html代码是：

<form [formGroup]="form">
  <mat-select placeholder="country" [formControl]="country" >
    <mat-select-trigger>
     {{country.name}}         
    </mat-select-trigger>
    <mat-option *ngFor="let country of countries" [value]="country">
      {{country.name}} 
      <span class="example-additional-selection">
       Staff ID: {{country.id}}
      </span>  
       <span class="example-additional-selection">
       Staff Name:  {{country.firstname}}
      </span>  
      <span class="example-additional-selection">
       Staff Type:  {{country.staff}}
      </span>
      </mat-option>
  </mat-select>
</form>

我可以在选择框中列出子文本，但无法显示所选值。 当我在

mat select trigger

标记中放入一个静态文本时，它会工作，但当我放入变量

{{country.name}

时，我得到以下错误

错误：无法读取null的属性“name”

以下是stackblitz链接： 如果你能看一下，告诉我哪里做错了，我将不胜感激

---

谢谢。

您的stackblitz中有错误

错误：找不到具有未指定名称属性的控件

正在告诉您在组件上找不到控件

国家/地区

。代码有一个属性getter，它不返回模板所期望的

FormControl

。你有一些选择

---

更新getter以返回

FormControl

和nota

string

get country(): FormControl {
  return this.form.controls['country'] as FormControl;
}

---

删除getter并更新模板以在

FormGroup

[formControl]="form.controls.country" 

---

移除getter并在组件上创建对

FormControl

的直接引用

form: FormGroup;
country: FormControl;

constructor() {
  this.country = new FormControl();
  this.form = new FormGroup({
    country: this.country,
  });
}

---

编辑 要获取名称，请使用安全导航操作符。？。

{{form.controls.country.value?.name}} - selected text goes here

---

感谢Igor的回复。当用

{{country.name}}

替换

所选文本时，当我选择一个option@david83-你看到我答案中的链接了吗？根据我的回答，stackblitz就是你的stackblitz。它根据您的问题按您希望的方式工作。@david83-如果您正在添加名为
country
的
FormControl
的属性getter，请使用与我在stackblitz中相同的名称删除该属性getter。您能检查stackblitz链接吗，因为我仍然有
选中的文本在这里
我想显示选中的属性吗选项名在那里。当我放置
{{country}}
时，它显示我
{object object]
当我放置
{country.name}}
时，没有显示任何内容。@david83-请参阅更新，使用安全导航操作符：
{form.controls.country.value？.name}}-所选文本显示在这里
{{form.controls.country.value?.name}} - selected text goes here