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

时间:2017-08-02 14:19:03

标签: javascript angular apache-commons-lang3

我正在使用org.apache.com的动态表情符号值对angular2执行循环:android中的commons-lang3库,如\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>  

1 个答案:

答案 0 :(得分:0)

如果您需要在页面上正确显示它们,则需要将它们与Angular2中的innerHTML绑定

list_length