Search the Community

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.

Estou iniciando com Typescript/nodejs e está meio difícil encontrar conteúdo atualizado e claro. Tenho umas dúvidas sobre trabalhar com múltiplos arquivos, acho que coisas básicas pra quem já conhece Typescript, e agradecia qualquer ajuda com elas. Quando usar "/// <reference path="arquivo.ts" />" e quando usar "require"? Qual a diferença? Ambos podem ser usados com arquivos TS ou JS? Qual o funcionamento de cada um? Os arquivos devem possuir classes ou podem ser só arquivos de funções? Se puderem dar algum "exemplo prático" basicão seria perfeito. Obrigado pela atenção.