如何使用Angular 7在mat-select-trigger标签中显示所选的选项名称

Question

我正试图在选择框中显示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 如果您可以看看并告诉我我做错了什么，我将不胜感激。

谢谢。

Answer 1

您的堆叠闪击中有错误

  

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

告诉您在组件上找不到控件country。该代码具有不返回模板所期望的FormControl的属性获取器。您有一些选择。

---

更新吸气剂以返回FormControl，不返回string

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

---

删除吸气剂并更新模板以将控件放置在FormGroup

中

[formControl]="form.controls.country" 

---

删除吸气剂并在组件上创建对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