Угловая 2 - bypasscecurity

Question

я проблема хаба с «безопасностью» угловой 2. Я стараюсь, чтобы вычислить поверочный WITDH в ngfor петли:

<span style="width:updateStyle({{ ((date | amDifference : item.startdate : 'minutes' :true)/item.duration*100) | round }})% .....more span>

И импорт/изменен байпас-security.component из интернета:

import { Component } from '@angular/core'; 
 
import { DomSanitizer, SafeStyle, SafeResourceUrl, SafeUrl } from '@angular/platform-browser'; 
 

 
@Component({ 
 
    selector: 'bypass-security', 
 
    templateUrl: 'app/bypass-security.component.html', 
 
}) 
 

 
export class BypassSecurityComponent { 
 
    dangerousUrl: string; 
 
    trustedUrl: SafeUrl; 
 

 
    dangerrousStyle: string; 
 
    trustedStyle: SafeStyle; 
 

 
    // #docregion trust-url 
 
    constructor(private sanitizer: DomSanitizer) { 
 
     // javascript: URLs are dangerous if attacker controlled. 
 
     // Angular sanitizes them in data binding, but you can 
 
     // explicitly tell Angular to trust this value: 
 
     this.dangerousUrl = 'javascript:alert("Hi there")'; 
 
     this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl); 
 
     this.trustedStyle = sanitizer.bypassSecurityTrustStyle(this.dangerrousStyle); 
 
    } 
 

 
    updateStyle(id: string) 
 
    { 
 
     this.trustedStyle = this.sanitizer.bypassSecurityTrustStyle(this.id); 
 
    } 
 
}

Но все равно получите эту ошибку: ВНИМАНИЕ: очистка небезопасного значения значения ширины: 83%; высота: 3px; цвет фона: # d9d9d4; Дисплей: встроенный блок; (см. http://g.co/ng/security#xss).

Что я могу сделать?

Спасибо!

Answer 1

Вызов методов из поля зрения привязки, как правило, плохая практика, так как этот метод вызывается каждый раз, когда Angular2 проверки изменений (выполняется обнаружение изменить)

Я не получить то, что вы пытаетесь достичь, но если вы хотите установить ширину в % сделать что-то вроде

<span [style.width.%]="width"> 

и присвоить значение, которое вы хотите использовать для width свойства с этим именем

constructor() { 
    this.width = updateStyle(((date | amDifference : item.startdate : 'minutes' :true)/item.duration*100) | round }}) 
    // I have a really hard time figuring out what this is supposed to do 

Я использовал конструктор только для примера. делать расчет, когда вы думаете, что он должен быть обновлен (некоторое событие, некоторый обратный вызов жизненного цикла, ...)