Search the Community

Boa tarde a todos, estou tentando fazer um autocomplete com suggestion e uso o TypeScript, vi esta aplicação no youtube mas sem utilizar o TypeScript. Quando rodo a aplicação ela funciona, mas mostra erro na pagina quando é carregada, por causa da falta de tipagem, gostaria de saber como fazer. A aplicação funciona assim: carrego os nomes que tenho no banco de dados vindos do back: useEffect(() => { const loadUsers = async() => { const response = await api.get('/cadastrousuarios'); setUsers(response.data); console.log(response.data); } loadUsers(); }, []); na propriedade do input onChange eu chamei onChangeHandler: <input type='text' className='col-md-12 input' onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeHandler(e.target.value)} value={text}/> É no onChangeHandler que esta o problema, o código pega o valor que do get em .json e procura na coluna_nome os valores que são inputados no input e mostra as sugestões: const onChangeHandler = (text: any) => { let matches: React.SetStateAction<never[]>= []; if (text.length>0){ matches = users.filter( user => { const regex = new RegExp(`${text}`, 'ig'); return user.coluna_nome.match(regex); }) } setSuggestions(matches) setText(text) } no return user.coluna_nome.match(regex) da erro no .coluna_nome. o erro é: Property 'coluna_nome' does not exist on type 'never'.ts(2339). Sei que é problema de tipagem mas não sei como fazer a tipagem desse item, poderiam me ajudar por favor. Obs: Quando abro a pagina da erro por causa dessa tipagem, mas eu fecho o erro e funciona certinho!

Boa tarde a todos, estou tentando fazer um autocomplete com suggestion e uso o TypeScript, vi esta aplicação no youtube mas sem utilizar o TypeScript. Quando rodo a aplicação ela funciona, mas mostra erro na pagina quando é carregada, por causa da falta de tipagem, gostaria de saber como fazer. A aplicação funciona assim: carrego os nomes que tenho no banco de dados vindos do back: useEffect(() => { const loadUsers = async() => { const response = await api.get('/cadastrousuarios'); setUsers(response.data); console.log(response.data); } loadUsers(); }, []); napropriedade do input onChange eu chamei onChangeHandler: <input type='text' className='col-md-12 input' onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeHandler(e.target.value)} value={text}/> É no onChangeHandler que esta o problema: const onChangeHandler = (text: any) => { let matches: React.SetStateAction<never[]>= []; if (text.length>0){ matches = users.filter( user => { const regex = new RegExp(`${text}`, 'ig'); return user.coluna_nome.match(regex); }) } setSuggestions(matches) setText(text) } no return user.coluna_nome.match(regex) da erro no .coluna_nome. o erro é: Property 'coluna_nome' does not exist on type 'never'.ts(2339). Sei que é problema de tipagem mas não sei como fazer a tipagem desse item, poderiam me ajudar por favor.

Senhores, boa tarde.Pesquisei muito antes de abrir esse post, inclusive aqui, neste fórum. Encontrei dúvidas parecidas as quais tentei adaptar ao meu caso porem sem sucesso.A questão é a seguinte:Foi desenvolvida uma API em ASP.NET Core 2.0, mas por algumas solicitações do cliente, necessitei migrar para a versão 3.1. Existe uma SPA em Angular 7 que faz a requisição à API através de um método POST passando os parâmetros para a API que retornava um conjunto de dados para aplicação montar a tela. Após a atualização parou de funcionar! Por isso, gostaria de pedir a ajuda de vocês, por que, eu já esgotei as minhas tentativas.**No Controller da API está da seguinte maneira:** 1 2 3 4 5 6 7 8 [HttpPost] [Route("api/[controller]")] public IGResult Post(Filtro filtro) { Console.WriteLine("filtro: " + filtro); var app = new IgApplication(); return app.getInstrucoes(filtro); } **E no angular se encontra dessa forma:** 1 return this._http.post<IgResult>(environment.url + 'api/IG', this.Filtro, options) Ao debugar a API, percebo que os dados do parâmetro **body** chegam nulos. Já tentei das seguintes maneiras abaixo, mudar a implementação do POST na API porém sem sucesso: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 > //public async Task<IActionResult> Post([FromBody] Filtro pessoa) > //public HttpResponseMessage Post(Filtro pessoa) > //public async Task<ActionResult<IList<Todo>>> Create([FromBody]TodoCreateViewModel model) > //public Task<IActionResult> Post([FromBody] Filtro filtro) > //public ActionResult<Filtro> Post([FromBody] Filtro filtro) > //public HttpResponseMessage Post(Filtro filtro) > //public string Post([FromBody] Filtro filtro) > //public IActionResult Post([FromBody] Filtro filtro) > //{ > //var app = new IgApplication(); > //return app.getInstrucoes(filtro); > //return null;// Json(filtro); > //} > //public async System.Threading.Tasks.Task<string> Post(HttpRequestMessage request) > //{ > // string body = await request.Content.ReadAsStringAsync(); > // return body; > //} Por isso se possível, gostaria muito de contar com a colaboração de vocês.Desde já muito obrigado!

As 7 linguagens de programação que você deve aprender em 2020

Boa tarde, Estou tendo dificuldade pra carregar uma tela de edição de usuários, mais especificamente pra carregar os perfis, que são dinâmicos e apresentados como checkboxes. Eu tenho essa três entidades: Usuário: export class Usuario { id: number; nome: string; telefone: string; email: string; } Perfil: export class Perfil { id: number; nome: string; } UsuarioPerfil (tabela que relaciona quais perfis o usuário tem) export class UsuarioPerfil { id: number; idUsuario: number; idPerfil: number; } Inicialmente eu carrego todos os perfis da base e os apresento como checkboxes no trecho de ngOnInit abaixo. São apresentados assim no banco, por exemplo: ID_USUARIO ID_PERFIL 98 8 98 9 Isso quer dizer que o usuário 98 tem os perfis de Usuario(8) e N1(9). Então eu gostaria de alguma maneira de, conforme eu for iterando os checkboxes no loop do html eu chamasse a função do spring passando so id do perfil e o id do usuário (98) e (caso voltasse ok do serviço (quando passar 8 e 9, que são os que existem), eu marcasse o checkbox como “checked”. Ou alguma outra solução mais adequada. Como eu poderia fazer isso? HTML: <h3>Alterar Usuario</h3> <div [hidden]="submitted" style="width: 400px;"> <form (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="name">Nome</label> <input type="text" class="form-control" id="nome" required [(ngModel)]="usuario.nome" name="nome"> </div> <div class="form-group"> <label for="telefone">Telefone</label> <input type="text" class="form-control" id="telefone" required [(ngModel)]="usuario.telefone" name="telefone"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" id="email" required [(ngModel)]="usuario.email" name="email"> </div> <h4>Perfis</h4> <table class="table table-striped"> <thead> </thead> <tbody> <tr *ngFor="let perfil of perfilData"> <input type='checkbox' id="perfil{{perfil.id}}" > {{perfil.nome}} </tr> </tbody> </table> <button type="submit" class="btn btn-success">Submit</button> </form> </div> TS: import { Component, OnInit } from '@angular/core'; import { Usuario } from '../usuario'; import { ActivatedRoute, Router } from '@angular/router'; import { UsuarioService } from '../usuario.service'; import { PerfilService } from './../perfil.service'; import { Perfil } from "./../perfil"; import { UsuarioPerfilService } from './../usuarioperfil.service'; @Component({ selector: 'app-update-usuario', templateUrl: './update-usuario.component.html', styleUrls: ['./update-usuario.component.css'] }) export class UpdateUsuarioComponent implements OnInit { id: number; usuario: any; perfisservico: Observable<Perfil[]>; perfilData:any=[]; constructor(private route: ActivatedRoute,private router: Router, private usuarioService: UsuarioService, private perfilService: PerfilService, private usuarioperfilService: UsuarioPerfilService) { } ngOnInit() { this.usuario = new Usuario(); this.id = this.route.snapshot.params['id']; this.usuarioService.getUsuario(this.id) .subscribe(data => { console.log(data) this.usuario = data; }, error => console.log(error)); this.perfilService.getPerfisList() .subscribe(res=> { if (res) { this.perfisservico= res; this.perfilData = this.perfisservico; } }) } updateUsuario() { this.usuarioService.updateUsuario(this.id, this.usuario) .subscribe(data => console.log(data), error => console.log(error)); this.usuario = new Usuario(); this.gotoList(); } onSubmit() { this.updateUsuario(); } gotoList() { this.router.navigate(['/usuarios']).then(() => { window.location.reload(); }); } }

Ola! A pergunta pode parecer simples, mas eu sou junior e estou consertando algumas coisas num projeto ja existente. No momento eu tenho uma barra de pesquisa em um <div> com um input type=text que esta escondido e um botao com uma lupa, quando se clica na lupa o input desliza e aparece porem para poder digitar algum valor no input eu preciso apertar no input novamente. Gostaria de saber se existe alguma forma de fazer com que quando clicasse na lupa a barra de pesquisa deslisasse ja com o cursor text no input e pronto pra escrever em vez de ter que clicar novamente. Obrigada!

Neste curso serão apresentados os principais recursos do Angular na prática. Para isso, por meio de exemplos, serão exploradas as principais funcionalidades desse framework, possibilitando o conhecimento necessário para saber como criar, desenvolver e utilizar componentes, serviços, rotas e diretivas. O Angular pode ser usado para a criação de aplicações para a Web, Desktop e Mobile, embora sua maior utilização ocorra para aplicações web.

Bom dia! Estou com uma dificuldade em alinhar um desenvolvimento para Front usando Typescript, RequireJs e pacotes NPM, Bower, Yarn e etc. Meu objetivo: Criar códigos Typescript, separar o desenvolvimento em módulos AMD e chama-los através do RequireJs. Estava funcionando bem até chegar a um módulo composto por dois ou mais arquivos que são mesclados em um único arquivo, até aqui consegui com um relativo sucesso, mas tive um pequeno problema, a chamada para os meus pacotes ficaram assim: define("Alvo", ["require", "exports", "../node_modules/@organizacao/pacote/index"], function (require, exports, pacote) { // Código }); Quando o objetivo era obter algo como: define("Alvo", ["require", "exports", "@organizacao/pacote"], function (require, exports, pacote) { // Código }); O que resolvi editando o arquivo gerado manualmente, mas isso não é algo prático. Vocês tem alguma sugestão? Estou indo no caminho correto? Existe uma forma melhor de se trabalhar?

Estou desenvolvendo uma aplicação com Angular Cli, estou acompanhado um curso onde ele cria os arrays e cadastra no localStorage do naveador. Mas eu queria fazer diferente, quero chamar uma api, ler esse json e alimentar meu HTML. No app.module.ts importei o HttpClientModule e no meu component.ts coloquei o seguinte: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-listar', templateUrl: './listar.component.html', styleUrls: ['./listar.component.css'] }) export class ListarComponent implements OnInit { itensJson: string[]; constructor(private http: HttpClient) { } ngOnInit() { const Key = "2hKjRWO84XXPqnffl8lPZW1WCXbSyQj8q5VDpECf"; this.http.get('https://api.com?api_key='+Key).subscribe(data => { this.itensJson = data['itensJson']; }); } } Só que agora eu não sei como manipular isso. No HTML no tr eu coloquei assim: <tr *ngFor="let itensJson of itens"> <td>{{ itens.nome }}</td> </tr> Mas não exibe nada e eu não sei como eu poderia debugar o retorno do Json, estou estudando as sintaxe do Angular, mas não tenho dificuldades em Javascript. Só quero aprender de forma correta a usar o Angular. Abraços e obrigado!

Estou fazendo iniciando um app com Ionic 3, e utilizando a API do google para geolocalização. Segui tutoriais e mesmo assim deu esse erro quando abro a página que deveria aparecer o mapa " Runtime Error Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null " Já procurei em alguns lugares e não encontro solução, nenhuma funciona. To precisando de ajuda com esses mapinhas. HTML da página inicial... <ion-header> <ion-navbar> <ion-title> Teste </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> Latitude: {{lat}} </ion-item> <ion-item> Longitude: {{lon}} </ion-item> </ion-list> <button (click)="openMap()">Mapa</button> </ion-content> .ts da página inicial: import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Geolocation } from '@ionic-native/geolocation'; import { MapPage } from '../map/map'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { lat:any=0.0; lon:any=0.0; constructor(public navCtrl: NavController, public geolocation: Geolocation) { //[ .. outra parte do código .. ] this.geolocation.getCurrentPosition().then((resp) => { // resp.coords.latitude // resp.coords.longitude this.lat = resp.coords.latitude; this.lon = resp.coords.longitude; }).catch((error) => { console.log('Error getting location', error); }); let watch = this.geolocation.watchPosition(); watch.subscribe((data) => { // data can be a set of coordinates, or an error (if an error occurred). // data.coords.latitude // data.coords.longitude }); } openMap(){ this.navCtrl.push(MapPage); } } //[ .. outra parte do código .. ] //} HTML da página do mapa: <ion-header> <ion-navbar> <ion-title>map</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div id="mapa" > </div> </ion-content> .ts da página do mapa: import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular'; import '../map/map'; import { Geolocation } from '@ionic-native/geolocation'; declare var google: any; /** * Generated class for the MapPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-map', templateUrl: 'map.html', }) export class MapPage { private initPage(){ let LatLng = new google.maps.LatLng(-22.913293, -43.688930); let mapOptions = { center: LatLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true } let elemento = document.getElementById('mapa'); let mapa = new google.maps.Map(elemento, mapOptions); } //ionViewDidLoad() { // console.log('ionViewDidLoad MapPage'); //} constructor(public navCtrl: NavController, public navParams: NavParams, platform: Platform) { platform.ready().then(() =>{ this.initPage(); }, (err) => { console.log(err); }); } } E na index.html (só uma parte): <!--para o api do google maps .................................................................. --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; script-src 'self' https://*.googleapis.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"> <title>Ionic App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#4e8ef7"> <!-- google maps .............................................................................. --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script> Talvez seja informação demais, mas, acho melhor que tenha mais do que menos.