-2

import { MatchService } from './../match.service';
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core'
import { Match } from '../match.model';
import {FormControl, Validators} from '@angular/forms';
import { MatchCreateService } from './match-create.service';
import { templateSourceUrl } from '@angular/compiler';


@Component({
  selector: 'app-match-create',
  templateUrl: './match-create.component.html',
  styleUrls: ['./match-create.component.css']
})
export class MatchCreateComponent implements OnInit {

  
  teams: Team[] = [];

  selectedAwayTeam = this.teams[1];
  selectedHomeTeam = this.teams[0];
    match: Match = {
    homeTeam: '',
    awayTeam: '',
    goalsHomeTeam: 0,
    goalsAwayTeam: 0
  }
  /*logo: Blob[] = this.teams[1].logo;*/
  
  constructor(private matchService: MatchService, private router: Router,
     private matchCreateService: MatchCreateService) { }

  ngOnInit(): void {
   this.getTeams();
  }
 getTeams(){
  this.matchCreateService.getTeams().subscribe(teams => {
    console.log(teams[8].srcLogo);
    this.teams = teams; 
  })
}
createMatch(): void {
  this.matchService.create(this.match).subscribe(() => {
    this.matchService.showMessage('Partida criada com sucesso!')
    this.router.navigate(['/matches'])
  })
}

cancel(): void {
  this.router.navigate(['/matches']);
}

teste(elemento: any){
  console.log(elemento)

}

}

Meu html

O primeiro elemento selecionado vem undefined, o segundo vem o primeiro elemento que mostrei e assim sucessivamente

Console

Eu gostaria apenas de pegar o elemento selecionado. Estou utilizando Angular 11

1 Resposta 1

0

Boa tarde Ivo, tudo bem? É até simples ivo basta seguir os passos abaixo, qualquer duvida estou a disposição.

Typescript (seu component.ts)

// variavel pra receber e enviar valor pro html
idTimeSelecionado: number = 0; 

// Lista com os times para o select
  listaTimes = [
    {
      nome: 'Atletico',
      id: '1',
      cidade: 'Belo Horizonte'
    },
    {
      nome: 'Corinthians',
      id: '2',
      cidade: 'São Paulo'
    }, 
    {
      nome: 'Flamengo',
      id: '3',
      cidade: 'Rio de Janeiro'
    },
  ];

Exemplo do ng-select ( seu component.html)

<ng-select [items]="listaTimes " bindLabel="nome" 
bindValue="id" placeholder="Selecione o time desejado"
[(ngModel)]="idTimeSelecionado">
</ng-select>

No select acima eu recebo uma lista de times, onde dentro tenho as propriedades id, nome e cidade. Pra conseguir acessar o valor primeiro eu passo para o bindValue="nome da propriedade que desejar salvar na variavel, no meu caso usei o 'id' ", para o bindLabel="Descrição que o usuario irá ver para escolher a opçao, no meu caso 'nome' ", agora no typescript eu crio uma variável do tipo number com o nome idMenuSelecionado, passo essa variavel pro [(ngModel)].

Depois é simples pra consultar o valor selecionado pelo o usuario no typescript, utilizar console para verificar valor selecionado.

  console.log(this.idMenuSelecionado);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .