如何使用Angular 7在mat-select-trigger标签内显示选定的选项名称答案

【问题标题】：How to show selected option name inside the mat-select-trigger tags using Angular 7如何使用Angular 7在mat-select-trigger标签内显示选定的选项名称
【发布时间】：2019-04-11 20:34:20
【问题描述】：

我正在尝试在选择框中显示 Subtext，如下面的屏幕截图所示。

我的 .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>

我的 .ts 代码是：

@Component({
  selector: 'select-custom-trigger-example',
  templateUrl: 'select-custom-trigger-example.html',
  styleUrls: ['select-custom-trigger-example.css'],
})
export class SelectCustomTriggerExample {
   countries = [
       {id: 1, name: "United States", staff: "Sales", firstname: "Mark"},
       {id: 2, name: "Australia", staff: "Sales", firstname: "John"},
       ...
     ];
  form: FormGroup;

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

  get country(): string {
    return this.form ? this.form.get('country').value : '';
  }
}

我可以在选择框中列出子文本，但无法显示所选值。当我将静态文本放入 mat-select-trigger 标记内时，它可以工作，但是当我放入变量 {{country.name}} 时，出现以下错误

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

这里是 stackblitz 链接：https://stackblitz.com/edit/angular-wd3vba-34arlh 如果你能看看并告诉我哪里做错了，我将不胜感激。

谢谢。

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

你的 stackblitz 中有错误

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

告诉您在组件上找不到控件country。该代码有一个属性 getter，它不返回模板所期望的 FormControl。你有一些选择。

更新 getter 以返回 FormControl 而不是 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

Stackblitz

【讨论】：

感谢伊戈尔的回复。当用<mat-select-trigger> {{country.name}}</mat-select-trigger> 替换selected text goes here 时，当我选择一个选项时，它仍然显示一个空文本
@david83 - 您在我的回答中看到Stackblitz 链接了吗？那 stackblitz 是根据我的回答修改的 stackblitz。它会根据您的问题以您希望的方式工作。
@david83 - 如果您要添加一个名为 country 的 FormControl，请删除同名的属性 getter，就像我在 stackblitz 中所做的那样。
你能检查一下你的 stackblitz 链接吗，因为我还有<mat-select-trigger> selected text goes here </mat-select-trigger> 我想在那里显示选定的选项名称。当我输入{{country}} 时，它显示[object object] 当我输入{{country.name}} 时，没有任何显示。
@david83 - 查看更新，使用安全导航运算符：{{form.controls.country.value?.name}} - selected text goes here