2017-07-21 9 views
0

Ich versuche, ngSwitch zu bekommen, um Komponente dynamisch ein- und auszublenden, aber ngSwitch scheint nicht zu funktionieren.ngSwitch funktioniert nicht mit String

Ich habe eine simplifed Version dieser Ausgabe erstellt mit diesem plunker

Dies ist die Komponente Html:

<div [ngSwitch]="componentType"> 
    <div *ngSwitchCase="input"> 
    <div>Rendered</div> 
    <ion-item [hidden]="editOptions.isEditing"> 
     <ion-note color="primary">{{label}}</ion-note> 
     <ion-note class="inline-edit"> {{value}}&nbsp;</ion-note> 
    </ion-item> 
    <ion-item [hidden]="!editOptions.isEditing"> 
     <ion-label color="primary">{{label}}</ion-label> 
     <ion-input [(ngModel)]="value" [required]="required" [type]="type" [name]="value"></ion-input> 
    </ion-item> 
    </div> 
    <div *ngSwitchCase="Lama"><div>Rendered</div></div> 
</div> 

Das ist mein Typoskript-Datei:

import { 
    Component, 
    Input, 
    ElementRef, 
    ViewChild, 
    Renderer, 
    forwardRef, 
    OnInit 
} from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 
import { EditOptions } from '../../../models/editOptions'; 

const INLINE_EDIT_CONTROL_VALUE_ACCESSOR = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => InlineEditComponent), 
    multi: true 
}; 

@Component({ 
    selector: 'inline-edit', 
    templateUrl: 'inline-edit.html', 
    providers: [INLINE_EDIT_CONTROL_VALUE_ACCESSOR], 
}) 
export class InlineEditComponent implements ControlValueAccessor, OnInit { 

    @ViewChild('inlineEditControl') inlineEditControl: ElementRef; 
    @Input() label: string = ''; 
    @Input() type: string = 'text'; 
    @Input() componentType: string = 'input'; 
    @Input() required: boolean = false; 
    @Input() disabled: boolean = false; 
    @Input() editOptions: EditOptions; 
    private _value: string = ''; 
    private preValue: string = ''; 
    public onChange: any = Function.prototype; 
    public onTouched: any = Function.prototype; 

    get value(): any { 
     return this._value; 
    } 

    set value(v: any) { 
     if (v !== this._value) { 
      this._value = v; 
      this.onChange(v); 
     } 
    } 

    writeValue(value: any) { 
     this._value = value; 
    } 

    public registerOnChange(fn: (_: any) => {}): void { 
     this.onChange = fn; 
    } 

    public registerOnTouched(fn:() => {}): void { 
     this.onTouched = fn; 
    } 

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

    ngOnInit() { 
    } 

} 

Das Seltsame ist mein Schalter sucht nach dem Wert "Eingabe" und obwohl es in dem Fall definiert ist, dass es immer noch null Bindung generiert

enter image description here

+0

Versuchen '* ngSwitchCase = " 'Lama'"'. –

Antwort

2

Sie sollte es innerhalb ''

<div *ngSwitchCase="'input''> 
<div *ngSwitchCase="'Lama'"><div>Rendered</div></div> 
+0

Danke Ich habe das gerade vor einer Sekunde erkannt Ich wünschte, es würde mich warnen –

+0

@ johnny5 Das Problem ist, es weiß nicht, ob Sie ein String-Literal verwenden wollten, oder ob Sie eine Variable verwenden wollten, aber vergessen, sie zu definieren. –

+0

Ja, ich wünschte, es würde mir eine Warnung geben, dass ich eine undefinierte Variable verwende –