select - 从选定的选项中获取文本

Question

我有一个带有一些 <select> 的表格绑定(bind)到来自 web 服务的对象:

<select [(ngModel)]="configDatas.type" name="type" id="type">
        <option value="0">Disabled</option>
        <option value="1">Day</option>
        <option value="2">Week</option>
</select>

<select [(ngModel)]="configDatas.days" name="days" id="days">
        <option value="0">Monday</option>
        <option value="1">Tuesday</option>
        <option value="2">Wednesday</option>
</select>

这边的一切都按预期工作。

我需要在表格末尾添加一个句子，这是对用户选择的总结。
就像是 :

<span> You selected type {{configDatas.type}} with day {{configDatas.days}}</span>

但我正在寻找选项的文本而不是值。
我想看到类似的东西:

You selected type Week with day Monday

这是否可以直接在模板中而不在组件端使用任何类型的转换？

Answer 1

更新 :您可以使用更改事件来跟踪新选择的选项:

<select [(ngModel)]="configDatas.type" name="type" id="type" #type (change)="updateType(type.options[type.value].text)">
    <option value="0">Disabled</option>
    <option value="1">Day</option>
    <option value="2">Week</option>
</select>

<select [(ngModel)]="configDatas.days" name="days" id="days" #days (change)="updateDay(days.options[days.value].text)">
        <option value="0">Monday</option>
        <option value="1">Tuesday</option>
        <option value="2">Wednesday</option>
</select>

<span> You selected type {{selectedType}} with day {{selectedDay}}</span>



export class App {
  configDatas: any;
  selectedType: string;
  selectedDay: string;

  constructor() {
    this.configDatas = {
      'type': '', 
      'days': ''
    };
  }

  updateType(text: string) {
    this.selectedType = text;
  }

  updateDay(text: string) {
    this.selectedDay = text;
  }
}

更新示例 http://plnkr.co/edit/ay7lgZh0SyebD6WzAerf