如何修复此符号 ' 在 angular 2 应用程序中显示为 &#39

Question

我有一个 angular 应用程序，当我单击网格 table 中显示的名称时，它正在调用 api。名称显示错误，因为无论我在哪里，都显示为 '。我通过使用修复它 .但是在幕后形成的 jql 查询的名称仍然是 "christopher O&#39 Hara"，因此查询中断并且没有显示正确的页面。关于如何解决这个问题的任何想法。 img of jql query

html -

  <div class="panel">
    <div class="panel-heading">
        {{gridTitle}}
    </div>
    <div class="gadget-body">
        <kendo-grid #grid [kendoGridBinding]="gridData" >
            <kendo-grid-column *ngFor="let column of columns" [field]="getColumnTitle(column)" [title]="getColumnTitle(column)" [width]="getColumnWidth(column)">
                 <template kendoGridHeaderTemplate let-column="column">
                    <span [title]="column.title" >{{column.title}}</span>
                </template>
                <template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                    <span *ngIf="column !== 'Percentage'">  
                    <span  style="color:#3b73af;cursor:pointer">    
                      <span [class.twoDimGrid]="column === header">                      
                       <span (click)="rowItemClick(dataItem, column)">                 
                   <!-- {{dataItem[column] }}changed to decode the html content from database -->
                    <span [innerHTML]="dataItem[column]"></span>      
                       </span>
                    </span>
                    </span>
                    </span>
                    <progressbar *ngIf="column === 'Percentage'" [max]="100" [value]="dataItem[column]">
                        <span style="color:white; white-space:nowrap;">{{dataItem[column]}}% </span>
                    </progressbar>
                </template>
                <template kendoGridFooterTemplate let-column let-columnIndex="columnIndex">
                    <span style="color:#3b73af;cursor:pointer">    
                      <span [class.twoDimGrid]="column.field === header"> 
                    <span (click)="footerClick( column)" >
                  {{total[column.field]}}
                    </span>
                    </span>
                    </span>
                </template>
            </kendo-grid-column>
        </kendo-grid>
    </div>
</div>

component.ts 

      ngOnInit() {
        this.columns = [];
        this.gridTitle = this.twoDimensionalGridInfo.Name; console.log(this.gridTitle);
        this.baseJql = this.twoDimensionalGridInfo.jql; console.log( this.baseJql);
        this.type = this.twoDimensionalGridInfo.type;  console.log(this.type);
        this.summary = this.twoDimensionalGridInfo.summary; console.log(this.summary);
        if (this.summary) {
            this.fields = this.summary.split('|');
            this.y = this.fields[0]; console.log(this.fields[0]); console.log(this.y);
            this.x = this.fields[1]; console.log(this.x); console.log(this.fields[1]);
        }
        let dataItem = this.gridData[0]; 
        if (dataItem) {
            var keys = Object.keys(dataItem);   console.log(keys);
            this.header = keys[0]
        }
        for (let field in dataItem) {
            this.columns.push(field); console.log(field);
        } 
        console.log(dataItem);

        this.total = this.gridData.reduce((sums, obj) => Object.keys(obj).reduce((s, k) => {
            k === this.header || k === 'Percentage' || (s[k] = (s[k] || 0) + +obj[k]);
            return s;
        }, sums), {});
        this.total[this.header] = "Total";
        this.total["Percentage"] = "";
    } 





    public rowItemClick(dataItem, column) {
        this.orderClause = this.baseJql.slice(this.baseJql.indexOf('ORDER'));
        if (!this.orderClause.startsWith("ORDER"))
            this.orderClause = '';
        if (column === 'Count') {
            if (dataItem[this.header] == 'No assignee' || dataItem[this.header] === 'None') {
                this.customJql = this.baseJql + ' AND "' + this.x + '" is EMPTY';
            }
            else {
                this.custombaseJql = this.baseJql;
                if (this.orderClause)
                    this.custombaseJql = this.baseJql.slice(0, this.baseJql.indexOf("ORDER"));
                this.customJql = this.custombaseJql + ' AND "' + this.x + '" = "' + dataItem[this.header] + '" ' + this.orderClause;
            }
        }
        else if (dataItem[this.header] == 'No assignee' || dataItem[this.header] === 'None') {
            this.custombaseJql = this.baseJql;
            if (this.orderClause)
                this.custombaseJql = this.baseJql.slice(0, this.baseJql.indexOf("ORDER"));
            this.customJql = this.custombaseJql + ' AND "' + this.x + '" is EMPTY' + ' AND "' + this.y + '" = "' + column + '" ' + this.orderClause;
        }
        else {
            this.custombaseJql = this.baseJql;
            if (this.orderClause)
                this.custombaseJql = this.baseJql.slice(0, this.baseJql.indexOf("ORDER"));
            if (this.x == this.y) {
                this.customJql = this.custombaseJql + ' AND "' + this.x + '"= "' + dataItem[this.header] + '"' + this.orderClause;
            }
            else
                this.customJql = this.custombaseJql + ' AND "' + this.x + '"= "' + dataItem[this.header] + '"' + ' AND "' + this.y + '" = "' + column + '" ' + this.orderClause;

        }
        this.userService.search(this.customJql);
    }

Answer 1

创建自定义管道 unescape:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'unescape'
})
export class UnescapePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    const doc = new DOMParser().parseFromString(value, 'text/html');
    return doc.documentElement.textContent;
  }

}

接下来的使用方式：

<div class="panel-heading">
        {{gridTitle | unescape}}
</div>

如何修复此符号 ' 在 angular 2 应用程序中显示为 &#39

how to fix this symbol ' is being displayed as &#39 in angular 2 application

html

javascript

jql

kendo-grid

angular