-2
Should I read a JSON and print the results inside a dynamically angled HTML.
The site would be a kind of chat where I have tags with dynamic DATABIDING, within the <ul class="list-group row">
I should list each "message" that would be the JSON.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
// constructor(private _http:HttpClient) {
// }
// ngOnInit() {
// this.emissor = 'Victor';
// let preparacao = { texto: 'texto 1', contato: 'garibaldo', data: new Date(), souEumesmo: false };
// this.adicionarMensagem(preparacao);
// let a = this._http.get("http://localhost:4200/assets/db/mensagem.json");
// console.log()
// console.log(a);
constructor(private _http: HttpClient) {
}
ngOnInit() {
this._http.get<PreparacaoDeMensagem[]>("../assets/db/mensagem.json")
.pipe(
map(data => {
let teste = [];
data.forEach(item => {
teste.push({
nome: item.contato
});
});
return teste;
})
)
.subscribe(data => console.log(data));
console.log ("---------------------------------"+JSON.stringify(this._http));
}
contatos: string[] = [];
emissor: string;
titulo: string = 'Chat';
conversa: Mensagem[] = [];
textoEmEdicao = "";
digitado: number = 0;
adicionarMensagem(preparacao: PreparacaoDeMensagem) {
let mensagem = {
texto: preparacao.texto,
data: preparacao.data,
contato: preparacao.contato,
souEumesmo: preparacao.contato === this.emissor,
}
if (mensagem.souEumesmo !== true && this.contatos.indexOf(mensagem.contato) < 0) {
this.contatos.push(mensagem.contato);
}
this.conversa.push(mensagem);
}
enviar() {
let mensagem = {
texto: this.textoEmEdicao,
data: new Date(),
contato: this.emissor
}
this.adicionarMensagem(mensagem);
this.clear();
}
clear() {
this.textoEmEdicao = "";
this.digitado = 0;
}
contar() {
this.digitado = this.textoEmEdicao.length;
}
clicar(){
if(this.textoEmEdicao != " " && this.textoEmEdicao.length > 0){
this.enviar();
}else{
//TROCAR O PLACEHOLDER
this.textoEmEdicao = "ESCREVE ALGO AI ";
}
}
verificar(texto: KeyboardEvent ) {
this.contar();
(<HTMLTextAreaElement>texto.target).placeholder = "Escrever mensagem...";
//texto.stopPropagation();
if (texto.keyCode == 13 || texto.which == 13) {
texto.preventDefault();
if(this.textoEmEdicao == "" || this.textoEmEdicao == " "){
(<HTMLTextAreaElement>texto.target).placeholder = "Digite um valor válido";
}else{
(<HTMLTextAreaElement>texto.target).placeholder = "Escrever mensagem...";
(<HTMLTextAreaElement>texto.target).focus() ;
this.enviar();
}
}
}
}
class Mensagem {
texto: string;
data: Date;
contato: string;
souEumesmo: boolean;
}
class PreparacaoDeMensagem {
texto: string;
data: Date;
contato: string;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="card">
<div class="header">
<h2>{{titulo}}</h2>
</div>
<div class="body">
<h2 class="card-inside-title"></h2>
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-group">
<div class="form-line">
<div class="body">
<ul class="list-group row">
<li *ngFor="let mensagem of conversa" class="list-group-item col-sm-8 col-md-8 col-lg-8 col-xl-8"
[ngClass]="{'bg-blue pull-right' :mensagem.souEumesmo,'bg-teal pull-left':mensagem.souEumesmo==false}">
{{mensagem.contato}} disse em {{mensagem.data | date:'dd/MM HH:mm'}} <br />
{{mensagem.texto}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-group">
<div class="form-line">
<textarea type="text" rows="5" maxlength=140 class="form-control no-resize" (keydown)="verificar($event)"
[(ngModel)]="textoEmEdicao" placeholder="Escrever mensagem..."></textarea>
</div>
</div>
<span>Caracteres restantes: {{140 - digitado}} </span>
<button type="button" (click)="clicar()" class="btn btn-primary btn-lg m-l-15 waves-effect pull-right">Enviar</button>
</div>
</div>
</div>
</div>
JSON:
[
{
"texto": "Eae",
"contato": "Luis",
"data": "2018-09-25 T21:08:00"
},{
"texto": "Salve povo",
"contato": "Rogerio",
"data": "2018-09-25 T21:15:00"
},{
"texto": "De boas?",
"contato": "Victor",
"data": "2018-09-25 T21:09:00"
},{
"texto": "Tranquilo",
"contato": "Luis",
"data": "2018-09-25 T21:08:00"
},{
"texto": "Nice",
"contato": "Rogerio",
"data": "2018-09-25 T21:08:00"
}
]
Pq vc is importing the Angularjs(1) into the angular(2) code)??
– Eduardo Vargas
I would like to understand what would be your question ... I did not understand exactly...
– Herbert Junior
@Eduardovargas I still don’t know exactly what are the codes and syntaxes of Angularjs(1) and Angular(2), there is a lot that "rotates" of Angularjs(1) at angular(2) and I ended up using because I don’t know the correct syntax in Angular(2) I ask for the mistakes, I’m still studying angular(2)
– Gunblades
@Herbertjunior : The question would actually be "how do I send data from JSON to Typescript" and inside the TS send via Databinding to visible screen, I ended up getting in trial and error
– Gunblades
this._http.get<PreparacaoDeMensagem[]>("../assets/db/mensagem.json")
 .subscribe(mensagem => {
 this.mensagem = mensagem
 //console.log('o valor é ', this.mensagem[0]);
 for (let i = 0; i < mensagem.length; i++) {
 this.adicionarMensagem(this.mensagem[i]);
 }
 })
Inside Ngoninit I ended up putting this code to upload the JSON data to the TS– Gunblades
Yes, you are right but you can use *ngFor to display in the HTML system
– Herbert Junior
@Herbertjunior could show me how, still do not understand angular right
– Gunblades