ionic3: Как получить выбранное значение DropDow (в списке) при нажатии другой кнопки в той же строке

Question

Я создаю список корзины покупок, используя ionic3 (для Интернета). Дизайн выглядит следующим образом:

Пожалуйста, найдите скриншот здесь

И то, чего я достиг, это (код):

<ion-row *ngFor="let course_schedules of courseDetails.course_schedules;let i= index" > 

 <ion-col col-2 class="tables">{{course_schedules.schedule_course}}</ion-col>
 // Dropdown
 <ion-col *ngIf="course_schedules.schedule_islesson;" col-3 class="tables">
   <select>
     <option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
   </select>
 </ion-col>

 <ion-col col-2 class="tables">{{ course_schedules.schedule_start }}</ion-col>
 <ion-col col-2 class="tables">{{ course_schedules.schedule_end }}</ion-col>

 <ion-col col-3 style="display:inline-flex" align="right">
    <button ion-button color="secondary" class="menuButton" (click)="addToCart()">Add to cart</button>
</ion-col>

Вопрос: Я могу создать пользовательский интерфейс, а также изменить и прочитать значения при выборе / изменении значения раскрывающегося списка. Но как я могу получить выбранное значение выпадающего меню, нажимая кнопку «Добавить в корзину»? Не могли бы вы предложить решение?

Answer 1

Наконец-то я решил эту проблему, используя следующий код:

В HTML: -

<select id="my-input-{{i}}">
        <option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
    </select>

В файле .ts: -

inputElement: any; 
addToCart(i){
this.inputElement = document.getElementById("my-input-"+i);
alert(this.inputElement.value);

}

Answer 2

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

Итак, добавьте, например, свойство selectedValue к вашей модели и привяжите к нему select. Затем вы можете получить доступ к значению в вашей кнопке с помощью course_schedules.selectedValue:

<select [(ngModel)]="course_schedules.selectedValue">
   <option *ngFor="let schedule_lessons of course_schedules.schedule_lessons;let j= index" value="{{schedule_lessons.lessons}}-{{schedule_lessons.price}}">{{schedule_lessons.lessons}} Lessons (€ {{schedule_lessons.price}}/Lesson)</option>
</select>
<button ion-button color="secondary" class="menuButton" (click)="addToCart(course_schedules.selectedValue)">Add to cart</button>