Working with select and options in angular 2

Question

Working with select and options in angular 2

Navigation

#1 by (0 votes)

0

I have 2 select fields, I need q when I select a value, it automatically selects an array of options for the other

Home Component

  eventAt:string=''
  @Output() selecionaEvento =  new EventEmitter<String>()
  @Output() eventos:string[]=[
  'ForumCientifico',
  'RoadSec',
  'MundoSenai'
   ]
    ofForum:string[]=[
   'IOTOficina',
   'BigData',
   'CoffeBreak'
   ]
    ofRoad:string[]=[
   'Drrone',
   'LOCKPICK'
    ]

   ofSenai:string[]=[
   'Palestra sobre internet das coisas',
    'LabAberto',
'IniciaçaoCientifica'
 ]

  ofAtual:string[]=[]
  eventoSelecionado(evento: String){

if(evento === "ForumCientifico") return this.ofAtual=this.ofForum
else if(evento === "RoadSec") return this.ofAtual=this.ofRoad
else if(evento === "MundoSenai") return this.ofAtual=this.ofSenai

Home HTML

<div *ngIf="eventos.length <= 0">
            <p>Não Foram Encontrados Eventos</p>
          </div>
          <div *ngIf="eventos.length > 0">
            <label class="col-md-4 control-label" for="evento">Selecione o evento</label>
            <div class="col-md-6">
              <select id="evento" name="evento" class="form-control" [(ngmodel)]="ofAtual">
                <option *ngFor="let evento of eventos" [value]="evento">{{evento}}</option>
              </select>
            </div>
            </div>
          </div>
      </div>
      <div class="col-md-6">
        <div *ngIf="eventos.length <= 0 || ofAtual.length <= 0">
          <p>Não Temos Oficinas Disponiveis Para Este Evento.</p>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label" for="oficina">Selecione a oficína</label>
            <div class="col-md-6">
            <select id="oficina" name="oficina" class="form-control">
              <option *ngFor="let oficina of ofAtual">{{oficina}}</option>
            </select>
            </div>
            </div>

      </div>

I want you to select an event and check the name and select it by the string

typescript angular

asked by anonymous 24.07.2017 / 18:01

1 answer

doubts with session Signing pdf with PHP

score 0 · Accepted Answer

No Two-way databind

<select (change)="onChange($event.target.value)">
      <option *ngFor="let i of values">{{i}}</option>
 </select>

onChange(eventValue) {
    console.log(eventValue);
}

With Two-way databind

<select [ngModel]="selectedValue" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of values">{{i}}</option>
</select>
export class AppComponent {
  values= 'one two three'.split(' ');
  selectedValue = 'two';
  onChange(newValue) {
    console.log(newValue);
    this.selectedValue = newValue;

}