Блог

Главная - Вопросы по программированию - использование привязки событий для selectbox (angular 9) .Вы можете посмотреть на gif

использование привязки событий для selectbox (angular 9) .Вы можете посмотреть на gif

#html #css #angular #typescript #angular9

#HTML #css #angular #typescript #angular9

Вопрос:

Я бы хотел, чтобы заголовок изменился на выбранное значение из select , но я не уверен, как это сделать. Это код, который у меня есть до сих пор:

component.html

 <p>Team:</p>

<select (Change)="selectchange($event)">
  <option *ngFor="let t of teams" [ngValue]="t" >
      {{t.team}}
  </option>
</select>
<h1>your team:<div>{{}}</div></h1>

component.ts

 teams= [
    { team: 'Galatasaray', value: '4 yıldızlı tek takım' },
    { team: 'Fenerbahçe', value: '3 yıldızlı takım'},
    { team: 'Beşiktaş', value: '3 yıldızlı takım'}
];

Пример анимации того, что я ищу

Комментарии:

1. Пожалуйста, добавьте актуальный вопрос в вашу тему и то, что вы пробовали до сих пор 🙂

2. Я студент . это актуальный вопрос. мне просто нужна помощь.

3. Чтобы мы могли вам помочь, нам нужен вопрос. Все, что вы сделали сейчас, это сбросили некоторую информацию и gif. Это не вопрос 🙂 Я отредактировал вашу тему, первая строка теперь является актуальным вопросом 🙂

Ответ №1:

Используйте create переменную selectedTeam и свяжите ее с помощью ngModel .

 <select [(ngModel)]="selectedTeam" (ngModelChange)="selectchange($event)">
  <option *ngFor="let t of teams" [ngValue]="t" >
      {{t.team}}
  </option>
</select>
<h1>your team:<div>{{selectedTeam?.team   selectedTeam?.value}}</div></h1>

Комментарии:

1. в type script вам нужно только реализовать переменную selectedTeam . поскольку его привязка к ngModal нему будет обновляться при изменении значения выпадающего списка

2. Можете ли вы написать коды, потому что я получаю сообщение об ошибке.

3. кода нет. просто создайте переменную selectedTeam для привязки к вашей ngModel. подробнее о ngModel angular.io/api/forms/NgModel