Angular

Programação
#1

Eu escrevi esse código do jeito em que eu aprendi

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-segundo-componente',
  templateUrl: './segundo-componente.component.html',
  styleUrls: ['./segundo-componente.component.css']
})
export class SegundoComponenteComponent {

  nome = "João";
  dataNascimento = "2005/01/01";
  urlImagem = "/assets/nando.jpg";

  mostrarDataNascimento(){
    alert("Data Nascimento: ${this.dataNascimento})");
  }
}

porem ele ficou assim:

Sem título
Sem título1366×738 84.6 KB

então resolvi fazer assim:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-segundo-componente',
  templateUrl: './segundo-componente.component.html',
  styleUrls: ['./segundo-componente.component.css']
})
export class SegundoComponenteComponent {

  nome = "João";
  dataNascimento = "2005/01/01";
  urlImagem = "/assets/nando.jpg";

  mostrarDataNascimento(){
    alert("Data Nascimento: )"+ ${this.dataNascimento});
  }
}

e ficou assim:

Sem título2
Sem título21366×738 156 KB

Porém, quando eu fiz assim:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-segundo-componente',
  templateUrl: './segundo-componente.component.html',
  styleUrls: ['./segundo-componente.component.css']
})
export class SegundoComponenteComponent {

  nome = "João";
  dataNascimento = "2005/01/01";
  urlImagem = "/assets/nando.jpg";

  mostrarDataNascimento(){
    alert("Data Nascimento: )"+ this.dataNascimento);
  }
}

Ele deu certo

Sem título3
Sem título31366×738 81.9 KB

Alguem me explica pq?

#2

Estou com essa mesa dúvida. Exatamente assim. No curso da proway, da capgemini.

#3

O que você deseja fazer é chamado de Template Strings. Nesse caso, você deve utilizar crase ao inves de aspas duplas ou simples. Então, o código correto seria:

mostrarDataNascimento(){
  alert(`Data Nascimento: ${this.dataNascimento}`);
}

As aspas duplas ou simples delimitam o inicio e fim do valor de uma string, então o Javascript reconheceu o trecho “${this.dataNascimento}” como parte do texto e não como a expressão de um template.

2 curtidas
#4

eu também esta quebrando a cabeça com isso.
eu percebi uma coisa no lugar das ‘’ (aspas simples), eu coloquei o acento grave `` e funcionou, ai ficou assim

mostrarDataNascimento(){
alert(A Data de nascimento do João é: ${this.dataNascimento});
}

#5

muito obrigado, eu estava apanhando aqui!!!

1 curtida