Ir para conteúdo
reinaldo054

Inserir comentários em um aplicativo IONIC

Recommended Posts

Eu estou criando um aplicativo em que embaixo do conteúdo da página eu tenho a opção do usuário fazer um comentário. Estou usando o firebase para fazer cadastro e login e já até consegui gravar a mensagem no banco de dados, mas só ela, precisava colocar o nome do usuário ou username, e a data que o comentário foi feito.

------------------ Meu html está assim:

 

<ion-content #content id="content">
<ion-card *ngFor="let message of messages">
<ion-card-header>
{{message.nome}}
</ion-card-header>
<ion-card-content>
{{message.mensagem}}
</ion-card-content>
<ion-footer>
<ion-toolbar>
<ion-input placeholder="Comente algo..." [(ngModel)]="message"></ion-input>
<ion-buttons end>
<button ion-button icon-right (click)="sendMessage()">
Enviar
<ion-icon name="send"></ion-icon>
</button>
</ion-buttons>


--------------------------meu ts está assim:
 

export class Cap1SegObsPage {

@ViewChild("content") content: any;
username: string
message: string = ""

messages = [];

constructor(public navCtrl: NavController) {
this.getMessages();
}

getMessages(){
var messagesRef = firebase.database().ref().child("mensSegObsCap1");
messagesRef.on("value", (snap) => {
var data = snap.val();
this.messages = [];
for(var key in data){
this.messages.push(data[key]);
}

this.scrollToBottom();
});
}

scrollToBottom(){
var contentEnd = document.getElementById("content-end").offsetTop;
this.content.scrollTo(0, contentEnd, 300);
}

sendMessage(){
var messagesRef = firebase.database().ref().child("mensSegObsCap1");
messagesRef.push({mensagem: this.message, nome: this.username});
this.message = "";
}
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por DeAngelis84
      Estou começando no desenvolvimento Angular com Node js, e estou preocupado com a seguinte questão:
       
      Para sites que necessitam de atualização e acréscimo de conteúdo constante como em um portal de noticias ou um e-commerce de porte médio para grande, 
      Ter que ficar dando Build em toda aplicação sempre que tiver um pequena alteração no site, é meio despendioso não acham? Qual seria a solução para isso?
      ou não existe solução e o melhor é partir para sites Multi-Pages?
    • Por Guilherme Costa Lopes
      Estou fazendo assim:
       
      paginacao.service.ts
          import { Injectable, EventEmitter } from '@angular/core';     @Injectable({       providedIn: 'root'     })     export class PaginacaoService {       public static modelo = new EventEmitter<any>();       public static primeiraPagina = new EventEmitter<any>();       public static paginaAnterior = new EventEmitter<any>();       public static proximaPagina = new EventEmitter<any>();       public static ultimaPagina = new EventEmitter<any>();       public static paginaAtual = new EventEmitter<any>();       public static totalPagina = new EventEmitter<any>();       public static totalRegistros = new EventEmitter<any>();     }  
      paginacao.component.ts
        import { Component, OnInit } from '@angular/core';     import { PaginacaoService } from '../../../service/paginacao/paginacao.service';     @Component({       selector: 'app-paginacao',       templateUrl: './paginacao.component.html',       styleUrls: ['./paginacao.component.css']     })     export class PaginacaoComponent implements OnInit {       /**        * variáveis de paginação        */       public totalPagina: number;       public totalRegistros: number;       public paginaAtual: number;       public modelo: any;       constructor(         protected paginacaoService: PaginacaoService       ) {}       ngOnInit() {         this.preencherVariaveisComponente();       }       private preencherVariaveisComponente() {         PaginacaoService.paginaAtual.subscribe(           paginaAtual => {             this.paginaAtual = paginaAtual;           }         );       }     }  
      paginacao.component.html
       
          Página <b>{{paginaAtual}}</b> de <b>{{totalPagina}}</b> -                Total de Registros: <b>{{totalRegistros}}</b>  
      A variável nunca é atualizada, mesmo o serviço trazer o valor, conforme imagem:
       
      Se preencho valor assim:
          this.paginaAtual = 1;         PaginacaoService.paginaAtual.subscribe(           paginaAtual => {             this.paginaAtual = paginaAtual;           }         );  
      Funciona, mas se o valor vier pelo servico, conforme imagem, não funciona. O que pode ser ?

    • Por Pedroalves
      o problema é o seguinte eu criei um gráfico e agora quero buscar dados mas so consigo por a funcionar se por assim estou a usar o angular 7, nodejs e mongodb
      let TotalSell = function() { var data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], datasets: [{ label: 'My First dataset', fillColor: 'rgba(220,220,220,0.2)', strokeColor: 'rgba(220,220,220,1)', pointColor: 'rgba(220,220,220,1)', pointStrokeColor: '#fff', pointHighlightFill: '#fff', pointHighlightStroke: 'rgba(220,220,220,1)', data: [65, 59, 80, 81, 56, 55, 40, 84, 64, 120, 132, 87] }] }; var options = { maintainAspectRatio: false, // Sets the chart to be responsive responsive: true, ///Boolean - Whether grid lines are shown across the chart scaleShowGridLines: true, //String - Colour of the grid lines scaleGridLineColor: 'rgba(0,0,0,.05)', //Number - Width of the grid lines scaleGridLineWidth: 1, //Boolean - Whether the line is curved between points bezierCurve: false, //Number - Tension of the bezier curve between points bezierCurveTension: 0.4, //Boolean - Whether to show a dot for each point pointDot: true, //Number - Radius of each point dot in pixels pointDotRadius: 4, //Number - Pixel width of point dot stroke pointDotStrokeWidth: 1, //Number - amount extra to add to the radius to cater for hit detection outside the drawn point pointHitDetectionRadius: 20, //Boolean - Whether to show a stroke for datasets datasetStroke: true, //Number - Pixel width of dataset stroke datasetStrokeWidth: 2, //Boolean - Whether to fill the dataset with a colour datasetFill: true, // Function - on animation progress onAnimationProgress: function() { }, // Function - on animation complete onAnimationComplete: function() { }, //String - A legend template legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>' }; // Get context with jQuery - using jQuery's .get() method. var ctx = $("#TotalSell").get(0).getContext("2d"); // This will get the first returned node in the jQuery collection. var chart1 = new Chart(ctx).Line(data, options); //generate the legend var legend = chart1.generateLegend(); //and append it to your page somewhere $('#TotalSellLegend').append(legend); }; <div class="col-sm-6"> <h5 class="over-title margin-bottom-15" style="text-align:center;">Total Sell</h5> <canvas id="TotalSell" class="full-width"></canvas> <div class="margin-top-20"> <div class="inline pull-left"> <div id="TotalSellLegend" class="chart-legend"></div> </div> </div> </div> o meu problema é como ponho a mostrar dados sem inserir dados aqui data: [65, 59, 80, 81, 56, 55, 40, 84, 64, 120, 132, 87] }] o meu objectivo é quando por a minha base de dados ele for buscar los a minha base de dados ou seja não quero ter que inserir manualmente no data:[] basicamente quero passar de dados staticos para dinamicos o que estou a fazer de errado
    • Por Edgard Hufelande
      Estou desenvolvendo um app que será aberto ao público pra atender a necessidade de um município...
      As senhas no banco estou salvando criptografadas usando Bcrypt, porém tenho uma dúvida no lado cliente, tenho uma API Rest
      para comunicação entre o app e o servidor, no momento do login ou do cadastro eu já deveria enviar essa senha criptografada na
      requisição ou envio a senha normal e criptografo no lado do servidor?
       
      Resumindo, não quero uma solução, quero uma sugestão sobre se devo criptografar a senha no lado cliente ou no lado servidor.
       
      Desde já grato pela atenção.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.