Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

  • Conteúdo Similar

    • Por araujoitalo
      Olá a todos!
       
      Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
       
      Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
      temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },  
      Imagem da tabela: 

       
      Criei um botão para tentar recuperar o valor, porem sem sucesso.
       
      Código do componente:
       
      export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente: 
      {{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
    • Por araujoitalo
      Olá a todos!
       
      Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
       
      Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
      temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },  
      Imagem da tabela: 

       
      Criei um botão para tentar recuperar o valor, porem sem sucesso.
       
      Código do componente:
       
      export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente: 
      {{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
    • Por jl_code
      Não estou conseguindo configurar anúncios do admob no meu app eu segui os tutoriais que achei na internet consegui exibir os anúncios de teste mas quando eu coloco o meu id do admob no codigo ele não exibe os anuncios
    • Por Guilherme Costa Lopes
      Estou usando o AgmCoreModule, para marcar endereços no google maps.
      No module, no import
           imports: [
               AgmCoreModule.forRoot({
                 apiKey: 'xxxxxxxxxxx'
              }),
           ]
      no export
            exports: [
                  AgmCoreModule
           ]
      No ts
           texto = 'teste';
             lat = -19.91506;
             lng = -44.00752;
             zoom = 15;
      No html
           <agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng">
             <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
           </agm-map>
      A principio ele mostra
       
      Mas depois dá este erro

      Ou este erro

      No servidor está dando este erro.

       
      O Chave key está  liberada
       
          main.cb562ea7df40e3f09b5f.bundle.js:2 Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=quarterly&callback=agmLazyMapsAPILoader&key=AIzaSyCD54jiJhEBda5MtJkgFJB-hfR6dv5V9jw&language=pt' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
       
           main.cb562ea7df40e3f09b5f.bundle.js:2 ERROR Error: Uncaught (in promise): Event: {"isTrusted":true}
               at x (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at x (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at main.cb562ea7df40e3f09b5f.bundle.js:2
               at e.invokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at Object.onInvokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at e.invokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at t.runTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at y (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at t.invokeTask [as invoke] (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at u (main.cb562ea7df40e3f09b5f.bundle.js:2)
      O  que pode ser ?
       
       
       
    • Por Guilherme Costa Lopes
      component
           download(idArquivo: number): void {
               this.arquivosService.downloadArquivoOrcamento(idArquivo).subscribe(
                 data => {
                   const blob = new Blob([data.arquivo], { type: 'text/json; charset=utf-8' });
                   const url= window.URL.createObjectURL(blob);
                   window.open(url);
                 },
                 err => {
                   console.error(err);
                 }
               )
             }
      Service
           import { HttpClient, HttpHeaders } from '@angular/common/http';
           import { Injectable } from '@angular/core';
           import { SERVER_API_URL } from 'app/app.constants';
           import { Observable } from 'rxjs';
           @Injectable({
               providedIn: 'root'
           })
           export class ArquivosService {
               constructor(
                   private http: HttpClient
               ) {}
               downloadArquivoOrcamento(id: number, tipo: string): Observable<any> {
                   return this.http.get(SERVER_API_URL + '/api/orcamento-anexo/' + id, 
                   {
                       responseType: 'blob',
                       headers: new HttpHeaders().append('Content-Type', tipo)
                   });
               }
           }
      Retorno do backend

      Não retorna o arquivo conforme imagem anterior

       
      Dowload com erro

       
       
      Já pesquisei e fiz alguma alteração, mas não achei a solução. O que quero é simples. O arquivo vem do backend em bytesm nome e content-type. Só quero fazer o dowload.
      O que pode ser ?
       
×

Informação importante

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