ngSwitch не работает со строкой

Я пытаюсь заставить ngSwitch динамически показывать и скрывать компонент, однако ngSwitch, похоже, не работает.

Я создал упрощенную версию этой задачи с помощью этого плункера.

Это компонент 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>

Это мой файл TypeScript:

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() {
    }

}

Странно то, что мой переключатель ищет значение «ввод», и хотя оно определено в случае, если оно все еще генерирует нулевую привязку

введите описание изображения здесь


person johnny 5    schedule 21.07.2017    source источник
comment
Попробуйте *ngSwitchCase="'Lama'".   -  person    schedule 21.07.2017


Ответы (1)


Он должен быть внутри ''.

<div *ngSwitchCase="'input''>
<div *ngSwitchCase="'Lama'"><div>Rendered</div></div>
person Sajeetharan    schedule 21.07.2017
comment
Спасибо, я только что понял это секунду назад, я бы хотел, чтобы это предупредило меня. - person johnny 5; 21.07.2017
comment
@ johnny5 Проблема в том, что он не знает, хотели ли вы использовать строковый литерал или вы хотели использовать переменную, но забыли ее определить. - person John Montgomery; 21.07.2017
comment
Да, я бы хотел, чтобы меня предупреждали, что я использую неопределенную переменную. - person johnny 5; 21.07.2017