2016-09-21 3 views
1

Ich habe ein seltsames Problem mit einem Boolean, das ich versuche, meine Anweisung als Eingabe zu übergeben. Aus irgendeinem Grund konvertiert eckig den booleschen Wert in eine Zeichenkette, obwohl ich sie als Boolean eingegeben habe.Angular 2 (RC.6) Direktive @Input wird in String konvertiert

Komponente, wie Sie Hintergrund sehen kann, ist ein boolean:

export class ModalsExportComponent extends Modal { 
    private background: boolean = false; 
    ... 
} 

Vorlage, hier bin Hintergrund meiner Richtlinien Eingang binden:

<label for='showBackground' cmgSharedCustomCheckbox='{{background}}'><span></span>Include Background</label> 

Richtlinie, hier definiere ich den Eingang und setzen es Geben Sie als Boolean, aber es ist irgendwie in eine Zeichenfolge konvertiert:

@Directive({ 
    selector: '[cmgSharedCustomCheckbox]' 
}) 

export class SharedCustomCheckboxDirective implements AfterViewChecked { 
    @Input('cmgSharedCustomCheckbox') isChecked: boolean; 

    constructor( private element: ElementRef, 
       private renderer: Renderer) { } 

    public ngAfterViewChecked(): void { 
    this.renderer.setElementClass(this.element.nativeElement.children[0], 'checkbox-unselected', true); 
    } 

    @HostListener('click') click(): void { 
    console.log(typeof this.isChecked); 
    if (this.isChecked) { 
     console.log('here'); 
     this.renderer.setElementClass(this.element.nativeElement.children[0], 'checkbox-unselected', false); 
     this.renderer.setElementClass(this.element.nativeElement.children[0], 'checkbox-selected', true); 
    } 
    } 
} 

Sie werden insi bemerken de mein Klick Host Listener Ich habe ein Konsolenprotokoll für den Typ von this.isChecked, die Zeichenfolge protokolliert. Wie werde ich kantig, um die Tatsache zu respektieren, dass ich gesagt habe, dass dieser Wert ein Boolescher Wert ist?

Antwort

1

Wie angegeben here,

das Material zwischen den Streben ist eine Schablone Ausdruck dass Angular ersten auswertet und wandelt dann in einen String.

Nicht-String-Werte zu binden, verwenden

<label for='showBackground' [cmgSharedCustomCheckbox]='background'>...</label> 
Verwandte Themen