Question

我有一个表单，其中一些<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>

但不是值，我正在寻找选项的文本。我希望看到类似的内容：

您选择了星期一的类型周

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

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

Answer 2

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

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

Answer 3

另一种方法是使用复杂对象作为选择列表选项。

您为选项声明了一个界面： export interface Day { id: number; text: string; }

在构造函数中给它一些选项： this.days = [ {id: 0, text: 'Monday'}, {id: 0, text: 'Tuesday'}, {id: 0, text: 'Wednesday'} ];

将其绑定到选项列表。在此处使用 ngValue 非常重要： <select [(ngModel)]="configDatas.days" name="days" id="days"> <option *ngFor="let day of days" [ngValue]="day">{{day.text}}</option> </select>

最后输出： <span> You selected type {{selectedType}} with day Id: {{configDatas.days.id}}, Text: {{configDatas.days.text}}</span>

完整示例：http://plnkr.co/edit/kDanyC

Answer 4

如果不为每个选择保留单独的数组，这是否可行？

不确定是否厌恶使用两个数组来解决这个问题，但有两个函数可以修复它。

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

然后只需要一些返回所需文本的函数。

displayType(type) : string {
  if (type == 0) {
    return "disabled"
  } else { //continue adding ifs
    return ""
  }
}

客观上更好的方法是让两个数组包含要显示的id和文本，然后使用*ngFor来构建选项。

从所选选项中获取文本

4 个答案: