Получить текст из выбранного варианта

Question

У меня есть форма с некоторой <select> связанной с объектом пришедшего из WebService:

<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

Возможно ли это без сохранения отдельного массива для каждый выбирает?

Не уверена в отвращении к использованию двух массивов для решения этой проблемы, но две функции могут ее исправить.

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

объективно лучше способ будет иметь два массива, которые содержат как идентификатор и текст для отображения, а затем использовать *ngFor построить варианты вверх.

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

Это может быть разница версии, но принятый ответ не работал меня. Но довольно близко. вот что сделал трюк для меня.

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