Лучший способ сделать выбор в Angular?

Question

Я использую стек MEAN (Angular 6) и все еще ищу лучший способ создания настраиваемого и повторно используемого элемента управления <select>, который использует массив строк, возвращаемых из BE, для генерации всех <option> теги. Скажем, например, у нас есть 3 материала wood, metal и plastic, и возвращаемый массив может быть одним из следующих (хранится в переменной materials):

(in my example.component.ts)

form = new FormGroup({
  'material' = new FormControl('')
});

get material() {return this.form.get('material');}

materials = [
  {
    key: "mat_wood",
    value: "Wood"
  },
  {
    key: "mat_metal",
    value: "Metal"
  },
  {
    key: "mat_plastic",
    value: "Plastic"
  }
]

или

(in my example.component.ts)

form = new FormGroup({
  'material' = new FormControl('')
});

get material() {return this.form.get('material');}

materials = [
  {"mat_wood": "Wood"},
  {"mat_metal": "Metal"},
  {"mat_plastic": "Plastic"}
]

и у нас есть такая структура HTML:

(in my example.component.html)

<form [formGroup]="form">
  <div class="select-wrap">
    <span class="select-value">{{}}</span>

    <select formControlName="material">
      <option *ngFor="let mat of materials" value="{{}}">{{}}</option>
    </select>
  </div>
</form>

Что в итоге должно быть скомпилировано так:

  <select formControlName="material">
    <option value="mat_wood">Wood</option>
    <option value="mat_metal">Metal</option>
    <option value="mat_plastic">Plastic</option>
  </select>

Здесь у нас есть классический пример пользовательской структуры выбора. <span class="select-value"> отображает текст выбранной опции для пользователя. <select> имеет opacity, установленный на 0, и располагается поверх <span>, поэтому, когда пользователь щелкает, он нажимает на него и активирует его.

Для каждой опции мне нужно поставить mat_[something] в атрибуте value и читаемый Something как текст в опции, как в примере выше:
<option value="mat_wood">Wood</option>.

Вопрос: как поместить текст выбранного параметра в <span>? Я ищу способ сделать это многократно.

---

EDIT
Глядя на первый ответ показывает (и я забыл упомянуть), что использование переменной шаблона делает свою работу. Но если у нас есть включающий цикл * ngFor, который генерирует множественные выборки, то нам нужно иметь динамически генерируемые переменные шаблона. Это вообще возможно?

Answer 1

Попробуйте этот пример для динамического параметра

В HTML

<mat-form-field>
  <mat-select placeholder="Select"    [(value)]="selected">
    <mat-option *ngFor="let data of materials" [value]="getKey(data)">{{getValue(data)}}</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

В TS

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
  selected = 'option2';
  materials = [
  {"mat_wood": "Wood"},
  {"mat_metal": "Metal"},
  {"mat_plastic": "Plastic"}
]
getValue(obj)
{
return obj[Object.keys(obj)[0]]
}
getKey(obj)
{
return Object.keys(obj)[0]
}
checkValue()
{
 console.log( this["mySelect"])
}
}

Answer 2

Одним из способов является то, что вы можете ссылаться на выбор в качестве переменной шаблона, скажем mySelect.

<select #mySelect formControlName="material">
  <option value="mat_wood">Wood</option>
  <option value="mat_metal">Metal</option>
  <option value="mat_plastic">Plastic</option>
</select>

, и ссылаться на его свойство options.text следующим образом.{{ mySelect && mySelect.selectedIndex > -1 ? mySelect.options[mySelect.selectedIndex].text : ''}} внутри вашего элемента span.

Вы можете прочитать о переменных шаблона здесь