1

Boa noite!

Preciso inserir dentro de um array do Angular a tag <sup></sup>, pesquisei mas não encontrei solução.

No navegador esta sendo renderizado: Decreto n<sup>o</sup> 32.231, de 09.03.2020 - DOM Salvador de 10.03.20200.

Poderiam me ajudar por favor?

app.component.html

<app-act-card></app-act-card>

act-card.component.html

<div *ngFor="let i of laws">
  <p>{{i.decree}}</p>
</div>

act-card.component.ts

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

@Component({
  selector: 'app-act-card',
  templateUrl: './act-card.component.html',
  styleUrls: ['./act-card.component.scss']
})
export class ActCardComponent implements OnInit {

  public laws = [
    { 
      decree: 'Decreto n<sup>o</sup> 32.231, de 09.03.2020 - DOM Salvador de 10.03.20200',
    }
  ];

}
5
  • Não pode simplesmente usar o caractere "°" (no meu teclado é alt gr + ?)?
    – Costamilam
    4/09/2020 às 1:18
  • @Costamilam, utilizar caracteres especiais diretamente em um arquivo HTML pode gerar problemas de mapa de caracteres. 4/09/2020 às 1:29
  • @LucasSamuel só se precisar de compatibilidade com navegadores antigos ou muito ruins
    – Costamilam
    4/09/2020 às 1:58
  • Independentemente disso, não é recomendado. Na empresa em que trabalho, charset gerava problemas por conta dos diferentes SO's e navegadores utilizados por nossos usuários. Tivemos que alterar todas as acentuações para notações compatíveis. 4/09/2020 às 13:16
  • Obrigado a todos! Sei que não é uma boa prática, mas preciso entregar um mockup funcional para a equipe de backend, eles tratarão de consumir essas informações de forma correta. 4/09/2020 às 14:59

1 Resposta 1

3

Você deve usar o property binding do Angular para determinar o valor de uma propriedade em um elemento HTML. Como você quer determinar o HTML dentro de um elemento p, a propriedade innerHTML desse elemento deve ser definida.

No Angular, você pode definir a propriedade de um elemento HTML usando essa sintaxe: [propriedade]. Portanto, o seu HTML deve ficar na seguinte forma:

<div *ngFor="let i of laws">
  <p [innerHTML]="i.decree"></p>
</div>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .