Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Só aparece as aspas no primeiro card

<div class="pensamento {{ pensamento.modelo }} ff-roboto-mono pensamento-p">
    <img src="../../../../assets/imagens/{{ pensamento.modelo }}.png" alt="Aspas coloridas">
    <p class="conteudo">{{ pensamento.conteudo }}</p>
    <p class="autoria"><b>{{ pensamento.autoria }}</b></p>
    <div class="acoes">
      <button class="botao-editar">
         <img src="../../../../assets/imagens/icone-editar.png" alt="icone de editar">
      </button>
      <button class="botao-excluir">
         <img src="../../../../assets/imagens/icone-excluir.png" alt="icone de editar">
      </button>
    </div>
</div>
<section class="container">
  <header class="header d-flex">
      <h2 class="ff-inter">Meu Mural</h2>
      <button routerLink="/criarPensamento" class="botao">Adicionar Pensamento</button>
  </header>
  <div class="mural" *ngIf="listaPensamentos.length > 0, else semPensamentos">
    <div *ngFor="let pensamento of listaPensamentos">
      <app-pensamento [pensamento]="pensamento"></app-pensamento>
    </div>
  </div>
</section>
<<ng-template #semPensamentos>
    <div class="ff-inter sem-pensamentos">
        <p>Ainda não há pensamentos cadastrados</p>
    </div>
</ng-template>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-listar-penamento',
  templateUrl: './listar-pensamento.component.html',
  styleUrls: ['./listar-pensamento.component.css']
})
export class ListarPenamentoComponent implements OnInit {

  listaPensamentos = [
    {
      conteudo: 'A persistência é o caminho do êxito.',
      autoria: 'Charles Chaplin',
      modelo: 'modelo3'
    },

    {
      conteudo: 'Deus é o nosso refúgio e fortaleza, socorro bem presente na angústia.',
      autoria: 'Salmos 46:1',
      modelo: 'Modelo2'
    },

    {
      conteudo: 'Tudo o que um sonho precisa para ser realizado é alguém que acredite que ele possa ser realizado.',
      autoria: 'Roberto Shinyashiki',
      modelo: 'Modelo1'
    }
  ];

  constructor() { }

  ngOnInit(): void {
  }

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

@Component({
  selector: 'app-pensamento',
  templateUrl: './pensamento.component.html',
  styleUrls: ['./pensamento.component.css']
})
export class PensamentoComponent implements OnInit {

  @Input() pensamento = {
    conteudo: 'A persistência é o caminho do êxito.',
    autoria: 'Charles Chaplin',
    modelo: 'modelo3'
  }

  constructor() { }

  ngOnInit(): void {
  }

}
1 resposta
solução!

Oi, Bruno! Tudo bem?

Você está usando a propriedade modelo para definir a imagem de aspas que será exibida em cada card. O problema é que os valores do modelo na sua lista estão diferentes. No primeiro item da lista, o valor é modelo3, mas nos outros dois, os valores são Modelo2 e Modelo1. Eles estão com a letra maiúscula no início.

Isso pode estar causando o problema. Os nomes de arquivos são sensíveis a maiúsculas e minúsculas. Se o nome do arquivo é modelo2.png, ele não será encontrado se você procurar por Modelo2.png.

Vou deixar um exemplo de como deveria ficar:

listaPensamentos = [
  {
    conteudo: 'A persistência é o caminho do êxito.',
    autoria: 'Charles Chaplin',
    modelo: 'Modelo3'
  },

  {
    conteudo: 'Deus é o nosso refúgio e fortaleza, socorro bem presente na angústia.',
    autoria: 'Salmos 46:1',
    modelo: 'Modelo2'
  },

  {
    conteudo: 'Tudo o que um sonho precisa para ser realizado é alguém que acredite que ele possa ser realizado.',
    autoria: 'Roberto Shinyashiki',
    modelo: 'Modelo1'
  }
];

Se outra dúvida surgir, fique à vontade para postar! ^_^

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software