在 Angular2 中显示编码的表情符号

Question

我正在 angular2 上执行一个循环，其中包含使用 org.apache.commons:commons-lang3 库在 android 中编码的动态表情符号值，例如 \uD83D\uDEB5\uD83D\uDEB5\uD83D\uDEB5。我需要在 angular2 前端解码它们。在 itemsArr[index]['Posted Content'] = item[0]['document']['post_content'];我从后端获取编码内容。和 这就是我试图向他们展示的方式

代码如下

    ngOnInit() {
    this.loading = true;
    var itemsArr = [];

    var reporterPromiseArr = [];
    var postPromiseArr = [];
    var posts = this._cb.getRelationalDataFromTable('reportPost').then(res => {
      res.forEach(item => {
        itemsArr.push({ 'Reported On': item.document.createdAt, 'Posted By': '', 'Posted On': '', 'postId': item.document.post_id });
        postPromiseArr.push(this._cb.getRelationalDataFromTableNew('userActivityStream', [{ key: '_id', value: item.document.post_id }], ['product_id', 'user_id']));
        reporterPromiseArr.push(this._cb.getRelationalDataFromTable('registration', [{ key: '_id', value: item.document.user_id }]));
      });

      return Promise.all(postPromiseArr);
    }).then(res => {
      res.forEach((item, index) => {

        itemsArr[index]['Posted By'] = (item[0]['document']['user_id'] !== null) ? item[0]['document']['user_id']['document']['user_name'] : '';
        itemsArr[index]['Posted On'] = item[0]['document']['createdAt'];
        itemsArr[index]['Posted Type'] = item[0]['document']['type'];
        itemsArr[index]['Total Likes'] = item[0]['document']['total_like'];
        itemsArr[index]['Posted Content'] = item[0]['document']['post_content'];

        itemsArr[index]['Image'] = decodeURI(item[0]['document']['image']);

      });

      //console.log(reporterPromiseArr);
      return Promise.all(reporterPromiseArr);
    }).then(res => {
      res.forEach((item, index) => {
        itemsArr[index]['Reported By'] = item[0]['document']['user_name'];
      });

      this.listingArr = itemsArr;
      this.loading = false;

    }).catch(err => {
      this.loading = false;
      console.log(err)
    });
    console.log(itemsArr);
    //return Promise.all(reporterPromiseArr);


  }

   html as follows where i tried to show them in innerHTML but not working

<form class="tr" #requestData="ngForm" (ngSubmit)="onSubmit(requestData)" *ngFor="let item of listingArr; let i = index">
                                            <div class="td">{{i + 1}}</div>
                                            <div class="td">{{ item['Reported By'] }}</div>
                                            <div class="td">{{item['Reported On'] | date: yMMMdjms }}</div>
                                            <div class="td">{{ item['Posted By'] }}</div>
                                            <div class="td">{{ item['Posted On'] | date: yMMMdjms }}</div>
                                            <div class="td">{{ (item['Total Likes'] == null)?0:item['Total Likes'] }}</div>
                                            <div class="td">{{ item['Posted Type'] }}</div>
                                            <div [innerHTML]="item['Posted Content']"></div>


                                            </div>
                                        </form>  

Answer 1

如果需要在页面上正常显示，需要在Angular2中用innerHTML进行绑定

<div [innerHTML]="the.path.to.property"></div>