如何使用Angular将Typecode中的unicode显示为HTML

Question

i´m using angular 5 and i want to display a string from a typescript file, which contains unicode into the html file.

example.component.ts

adDummy: AdDataDummy[] = [
    {
        name: "hanz",
        domain: "test.de",
        adPath: "CN=hanz,OU=Anwender,OU=Kunz,OU=test,DC=de",
        icon: "user.ico"
    },
    {
        name: "Hanz2",
        domain: "ok.de",
        adPath: "CN=Hanz2,OU=Anwender,OU=Köln,OU=ok,DC=de",
        icon: "user.ico"
    }];

example.component.html

<div class="col">
    <h4 >User {{ currentAdItem.name }} (Logon name: {{ currentAdItem.adPath }})</h4>
    <div>
        Current printer connections
    </div>
</div>

Outcome:

User Hanz (Logon name: CN=Hanz,OU=Anwender,OU=K�ln,OU=K-is,DC=de)

K ln should be Köln

Answer 1

Your example worked in stackblitz. But you can try use [innerHTML] attribute. Here example in stackblitz.

example.html

<div class="col" *ngFor="let currentAdItem of adDummy">
  <h4 [innerHTML]="concateItem(currentAdItem)"></h4>
  <div>
    Current printer connections
  </div>
</div>

example.ts

adDummy = [
{
  name: "hanz",
  domain: "test.de",
  adPath: "CN=hanz,OU=Anwender,OU=Simmern,OU=test,DC=de",
  icon: "user.ico"
},
{
  name: "Hanz2",
  domain: "ok.de",
  adPath: "CN=Hanz2,OU=Anwender,OU=Köln,OU=ok,DC=de",
  icon: "user.ico"
}];

concateItem(currentAdItem: any) {
  return `User ${currentAdItem.name} (Logon name: ${currentAdItem.adPath})`
}