Javascript 从JSON呈现Html，而不在第4行中显示样式标记的内容

我的JSON看起来像这样

{
    "product_details": {
        "description": "<style> img {width: 320px; height: auto;}</style>Apple iPhone 6 Gold , 128 GB New"
    }
}

{
“产品详细信息”：{
“说明”：“img{宽度：320px；高度：自动；}苹果iPhone 6金色，128 GB新”
}
}

我有一个组件模板是这样的：

<div class="panel-body" [innerHTML]="product_detail.description"></div>

如果我试图在浏览器中渲染它，它将显示如下

img{width:320px；height:auto；}

苹果iphone6金色，128 GB全新

样式标记的内容上方不应显示

---

请帮助我找到一种方法使其工作。

在Angular中，您可以使用自定义管道来过滤

产品的详细信息。说明

下面是一个示例，按如下方式实施：

<div class="panel-body" [innerHTML]="product_detail.description | getUnstyledText"></div>

@Pipe({name: 'getUnstyledText'})
export class GetUnstyledTextPipe implements PipeTransform {
  transform(text: string): string {
    let splitArray = text.split('</style>');
    return splitArray[splitArray.length-1];
  }
}

@管道（{name:'getUnstyledText'}）
导出类GetUnstyledTextPipe实现PipeTransform{
转换（文本：字符串）：字符串{
让splitArray=text.split（“”）；
返回splitArray[splitArray.length-1]；
}
}

上面的示例实现了这个纯JS，这是一个对字符串的拆分操作，用于获取所需的文本：

var string=“img{宽度：320px；高度：auto；}苹果iphone6金色，128 GB新”；
var splitString=string.split（“”）
log（splitString[splitString.length-1]）

如果您想使用该样式，可以从字符串中获取样式并将其注入[NgStyle]。