Select 从所选选项获取文本

我有一个表单，其中一些

绑定到从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>

您选择了日期为{{configDatas.days}的类型{{configDatas.type}}

但是我要找的不是这个值，而是这个选项的文本。 我想看看这样的东西：

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

您选择了日期为星期一的星期

---

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

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

<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;
  }
}

残废
白天
周
星期一
星期二
星期三
您选择了日期为{selectedDay}的类型{{selectedType}}
导出类应用程序{
配置数据：任何；
selectedType:字符串；
selectedDay:字符串；
构造函数（）{
this.configDatas={
“类型”：“，
“天”：“
};
}
updateType（文本：字符串）{
this.selectedType=文本；
}
updateDay（文本：字符串）{
this.selectedDay=文本；
}
}

更新的示例

这是否可以在不为每个select保留单独数组的情况下实现

不确定是否反对使用两个数组来解决这个问题，但有两个函数可以解决这个问题

<span> You selected type {{displayType(configDatas.type)}} with day {{displayDate(configDatas.days)}}</span>

---

客观上更好的方法是使用两个数组，其中包含要显示的id和文本，然后使用

*ngFor

来构建选项。

另一种方法是将复杂对象用于选择列表选项

为选项声明一个接口：

出口接口日{
id：编号；
文本：字符串；
}

在构造函数中为其提供一些选项：

这一天=[
{id:0，文本：“星期一”}，
{id:0，文本：“星期二”}，
{id:0，文本：“星期三”}
];

将其绑定到选项列表。在此处使用ngValue非常重要：

{{day.text}

最后输出它：

您选择了日期Id为{{configDatas.days.Id}的类型{{selectedType}}，文本：{{configDatas.days.Text}

---

完整示例：

这可能是版本差异，但接受的答案对我不起作用。但是非常接近。这就是我的诀窍

(change)="updateType(type.options[type.options.selectedIndex].text)

---

值无法更改，我的数据提供程序需要数值我正在更新我的答案，以获得更好的解决方案，以匹配您的场景。我不反对使用数组，我只是希望我可以像使用DOM一样直接获得值。很多select（超过2个）都有2到3个选项，对于我来说，用纯html编写它比定义一个数组并用NGFOR显示它要快得多。如果您使用的是angular版本4.x.x，这就行了。