0

Eu tenho um vetor no meu componente que está acentuado com código html.

text=[ 'DRENAGEM AUTÓGENA','BAG SQUEEZING','RESPIRAÇÃO DIAFRAGMÁTICA','CAR','AFE','INSPIRAÇÃO EM TEMPOS','FRENO LABIAL','INSPIRAÇÃO SUSTENTADA', 'INCENTIVADOR A FLUXO', 'HUFFING', 'VIBRAÇÃO','COMPRESSÃO-DESCOMPRESSÃO'];    

<div class="col-5 col-sm-3 col-md-3 col-lg-2 m-2 p-1" *ngFor="let t of text; let i = index"
  style="background-color: aliceblue">
  <div class="w-100 h-100">
    <app-card #card_1 number="{{ i + 1 }}" word="{{ t }}" [front]="!mestre" group="{{ groups[i] }}"><span
        class="badge badge-pill badge-primary">Primary</span></app-card>
  </div>
</div>

Quando eu faço um ngFor para mostrar todas as palavras {{ palavra }} ele não mostra a letra acentuada. Continua mostrando VIBRA &Ccedil ; &Atilde ;O

inserir a descrição da imagem aqui Alguma solução simples pra resolver isso?

3 Respostas 3

3

O problema é você estar usando as entidades HTML em vez de texto puro pros acentos, o Angular vai tratar ele apenas como texto e não como HTML.

Se você tem controle sobre este texto então o mais fácil é alterar para ele ter acentos normais, se esta opção não for viável as alternativas são de fazer um binding com o innerHtml

<div [innerHtml]="palavra">

Ou usar um pipe para decodificar o texto

@Pipe({name: "decodeHtmlString"})
export class DecodeHtmlString implements PipeTransform {
    transform(value: string) {
        const tempElement = document.createElement("div");
        tempElement.innerHTML = value;
        return tempElement.innerText;
    }
}

{{palavra | decodeHtmlString}}

No caso deste pipe acho importante notar que ele remove qualquer tag HTML que existir no seu texto, se por exemplo for passado para ele o valor &aacute;<script>alert("teste")</script> o resultado vai ser áalert("teste")

6
  • Leandro, é provável que seu código venha a funcionar, mas não teria uma outra forma de rearranjar isto? Porque brother, isto ai tá criando um objeto/elemento no navegador, fazendo um "recurso técnico" e não está limpando o objeto. Commented 2/10/2019 às 12:44
  • Salvo que eu esteja errado e o objeto seja limpo no fim da função. Eu sugiro então pelo menos limpar o objeto pra evitar uma sobrecarga no navegador do cliente. Dependendo de onde e como ele usar isto, pode ser que venha gerar muuuuuiita cópia no navegador. A cada iteração do usuário com a página o Angular vai recarregar isto e gerar um objeto novo, sabe como é. Commented 2/10/2019 às 12:46
  • Não creio que exista um problema, fica pro navegador e eu diria que no geral o GC vai limpar isso assim que possível, estou vendo uma terceira alternativa que não usa isso e vou incluir na resposta assim que conseguir testar Commented 2/10/2019 às 13:08
  • Interessante, pesquisei a respeito e sim, o garbage collector do navegador se encarrega de limpar. Top seu código, a melhor resposta para o usuário até o momento. +1 por mim Commented 2/10/2019 às 13:25
  • Pelo que vi aqui a outra alternativa seria usar o método bypassSecurityTrustHtml do DomSanitizer para ele permitir que o HTML seja usado, porém ele não funciona com o {{ bindings }}, apenas com [property]=binding e não estou certo do seu funcionamento para incluir ele na resposta, pois ele me parece acabar funcionando apenas se usar como na primeira solução [innerHtml]="binding | pipe", que neste caso não faz muito sentido. Se quiserem tem um exemplo aqui Commented 2/10/2019 às 13:56
-1

Verifique se o seu código tem essa seguinte estrutura básica:

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

Ele deve possuir ao menos a tag <meta charset="utf-8"> para que os acentos sejam aceitos! :)

-2

Insira no cabeçalho da sua página a tag meta charset e insira o valor "utf-8", pois essa tag é responsável por aceitar acentos, ç, e demais símbolos que pertencem a língua portuguesa. Desse modo o código inicial da página deverá ficar da seguinte forma:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

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 .