Warum angular x ngStyle wird nicht dynamisch aktualisiert?

Question

Ich verstehe nicht, warum diese paar Zeilen nicht funktionieren.

HTML-Vorlage:

<input class="picked-clear main-line-item main-line-box" type="button" value="" #pickedClear [ngStyle]="style" (click)="handleClearPickedBox($event)" /> 

component.ts: ...

export class DatePickerComponent implements OnInit, AfterViewInit { 

    placeholder:string = "Select a date"; 
    style:any = { 
    'background-image': "none" 
    } 

    @ViewChild('pickedBox') pickedBox; 
    @ViewChild('pickedClear') pickedClear; 

    constructor() { } 
    ... 


someFunc(){ 
    ... 
    this.style['background-image']="url(assets/img/datePicker/clear.svg)"; 
    ... 
} 
... 

Das Problem ist folgendes: Bei der der Schaltfläche starten Sie den Stil-Attribut mit dem Hintergrund-Bild bekommt: kein Wert. Das ist in Ordnung, aber wenn mein Skript die Funktion someFunc() aufruft, ändert sich der Stilwert, aber nicht nur das DOM in den ts.

Thx für Ihre Zeit im Voraus. :)

---

angeforderten Details (rewrited)

Datum-picker.component.ts:

<div class="date-picker"> 
    <div class="main-line"> 
    <input class="picked-box main-line-item" type="text" placeholder="{{placeholder}}" value="" #pickedBox (focus)="handlePlaceholderFocus($event)" (blur)="handlePlaceholderBlur($event)" (keyup)="handlePickedBoxChange($event)" /> 
    <input class="picked-clear main-line-item main-line-box" type="button" value="" #pickedClear [ngStyle]="style" (click)="handleClearPickedBox($event)" /> 
    <input class="picker-toggle-btn main-line-item main-line-box" type="button" value="" /> 
    </div> 
    <div class="picker-cont"> 

    </div> 
</div> 

Datum-picker.component.ts:

export class DatePickerComponent implements OnInit, AfterViewInit { 

    placeholder:string = "Select a date"; 
    style:any; 

    @ViewChild('pickedBox') pickedBox; 
    @ViewChild('pickedClear') pickedClear; 

    constructor(private sanitizer:DomSanitizer) { } 

    ngOnInit() { 
    this.style={}; 
    this.style['background-image']='none'; 
    this.style['cursor']='auto'; 
    } 
... 
handlePickedBoxChange(event){ 
    var target =   event.target || event.srcElement || event.currentTarget; 
    if(target.value.length>0){ 
     //this.pickedClear.nativeElement.style.backgroundImage = "url(assets/img/datePicker/clear.svg)"; 
     //this.pickedClear.nativeElement.style.cursor = "pointer"; 
     if(this.style['cursor']!='pointer'){ 
     this.style['background-image']=this.sanitizer.bypassSecurityTrustStyle('url(assets/img/datePicker/clear.svg)'); 
     this.style['cursor']='pointer'; 
     } 
    }else{ 
     //this.pickedClear.nativeElement.style.backgroundImage = "none"; 
     //this.pickedClear.nativeElement.style.cursor = "auto"; 
     this.style['background-image']='none'; 
     this.style['cursor']='auto'; 
    } 
    } 
... 

recent workflow

Answer 1

I t Arbeit sollte

StackBlitz example

Mit dem Sanitizer, nur scheint diese Art und Weise zu arbeiten:

<div [style.background-image]="backgroundImageSanitized">