Как показать выбранное имя опции внутри тегов mat-select-trigger, используя Angular 7

Question

Я пытаюсь отобразить подтекст в окне выбора, как показано на снимке экрана ниже.

Мой код .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}}, я получаю следующую ошибку

Ошибка: невозможно прочитать свойство 'name' из null

вот ссылка на стек: 1

Answer 1

В вашем стеке есть ошибка

Ошибка: не удается найти элемент управления с неопределенным атрибутом имени

сообщает вам, что элемент управления country не может быть найден на компоненте. В коде есть свойство getter, которое не возвращает FormControl, чего ожидает шаблон. У вас есть несколько вариантов.

---

Обновите метод получения, чтобы он возвращал FormControl и , а не a 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