问题描述
我有一个使用Pipe的递归Angular模板,用于深度嵌套的对象数组,其中有数据和子对象。我的问题是,仅当使用搜索功能时,我使用的是突出显示嵌套对象中搜索和找到的数据的管道。 DomSanitizer可以运行,但是它不会绕过安全性,并且我得到 SafeValue必须使用[property] = binding 。 我尝试将其用作 [innerHtml] =“ item.data | search:searchedData” ,但我只获得最高值,而没有深入嵌套的子值。
我用于呈现嵌套数据的HTML模板。
<h1>Angular Recursive List</h1>
<ul>
<ng-template #recursiveList let-users>
<li *ngFor="let item of users">
{{item.data | search:searchedData}}
<ul *ngIf="item.children.length > 0">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }">
</ng-container>
</ul>
</li>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: users}"></ng-container>
</ul>
@Pipe({
name: 'search',})
export class Search implements PipeTransform {
constructor(private sanitizer: DomSanitizer){}
transform(value: any,args: any): any {
if (!args) {
return value;
}
const val = new RegExp(args,'gi');
const domElement = value.replace(val,`<mark>${args}</mark>`);
return this.sanitizer.bypassSecurityTrustHtml(domElement);
}
}
我得到的html值:
SafeValue must use [property]=binding: Person 1(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: State(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: City(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: Street(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: Person 2(see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: <mark>State 2</mark> (see http://g.co/ng/security#xss)
SafeValue must use [property]=binding: City(see http://g.co/ng/security#xss)
解决方法
我通过在ngfor内使用另一个span元素修复了该问题,并使用innerHtml应用了这些值,因为ngfor元素仍未准备好使用管道。
以下代码解决了我遇到的问题:
func setupTable(){
if(0...19).contains(playerScore) {
let table = SKSpriteNode(imageNamed: "office")
addChild(table)
table.position = CGPoint(x: size.width/2,y: size.height/2)
table.zPosition = -1}
else if(20...39).contains(playerScore) {
let table = SKSpriteNode(imageNamed: "austin")
addChild(table)
table.position = CGPoint(x: size.width/2,y: size.height/2)
table.zPosition = -1}
else {
let table = SKSpriteNode(imageNamed: "bond")
addChild(table)
table.position = CGPoint(x: size.width/2,y: size.height/2)
table.zPosition = -1}
func addPlayerScore() {
playerScore += 1
playerLabel.text = "Arn: \(playerScore)"
}