0

Estoy usando angular y visual studio 19, y sucede que al momento de imprimir una lista local de un array se empieza a visualizar con caracteres extraños, cabe mencionar que mi index.html global cuenta con etiqueta charset="utf-8" y con la etiqueta content,

Lo raro es que si pongo palabras directo en el componente html, esos caracteres raros no aparecen, únicamente aparecen cuando los cargo en my typescript y trato de imprimirlos en el html, adicionalmente guarde mis archivos html y ts con la opción de "save with encoding" y los cambie a "with signature utf8" pero el problema es que aunque esten firmados se siguen viendo los caracteres raros en componentes, específicamente donde hago una lista de items en typescript y trato de imprimirla con un for en el html

Alguna alternativa para solventar esto

introducir la descripción de la imagen aquí

Actualización código:

En esté caso la opción México aparece así en el html México de igual forma es un dropdown como el que se muestra en la foto

export class RegistrationDataStepComponent {

  public countries = [
    { value: 'mexico', label: 'México', code: 'MX' },
    { value: 'usa', label: 'Estados Unidos', code: 'USA' }
  ];
}

Pasa como parametro a un componente dropdown que reciclo

 <app-dropdown [label]="'COUNTRY'" [items]="countries"></app-dropdown>

componente TS dropdown recibo los valores:

export class DropdownComponent
{

  @Input() public items: any = [];

}

HTML

<ng-container>
      <div #optionsContainer class="options-container">
        <div *ngFor="let item of items" >
          <input type="radio" class="radio" name="category" />
          <label >{{ item.label | translate }}</label>
        </div>
      </div>
</ng-container>

item.label usa un pipe que en general es para traducir a EN o ES, solo eso, pero item.label trae en si el valor de mi array (countries.label = 'México' pero lo muestra así México)

2
  • 1
    Hola. Comparte el codigo de .ts y el template para mirar, asi seguramente te podriamos ayudar.
    – Julio Daza
    Commented el 28 abr. 2022 a las 22:59
  • cargue de forma resumida el componente ts y como lo imprimo en el html
    – Jonathan G
    Commented el 28 abr. 2022 a las 23:18

1 respuesta 1

0

la primera es que México tiene tilde y puede ser que el problema sea con la etiqueta META o puede que el problema sea directamente con el pipe de translate.

  1. Puedes probar cambiando la meta de charset a ISO:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

  1. la otra posible solucion viene del pipe de translate: Seguramente tienes implementado para eso @ngx-translate en caso de que asi sea, esta implementacion requiere un archivo json para cada idioma, este json es un diccionario en donde estan las palabras y sus traducciones, seria agregar la palabra y como quieres traducirla:

    src/assets/i18n/en.json

    { "México" : "México" }

Incluso quizas en la traduccion debas incluir la codificacion especial de tildes:

{ "México": M&eacutexico}

  1. En alguna epoca lejana (cuando php reinaba y SublimeText era algo que debias piratear) los server VPS traducian y se cargaban cosas como las meta etiquetas, los viejos usabamos meta etiquetas a la mala en los form:

<form class="form" id="myForm" accept-charset="utf-8">

Espero que algo de esto te ayude!

Happy Coding!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.