javascript - ngSwitch 不适用于字符串

Question

我试图让 ngSwitch 动态显示和隐藏组件，但 ngSwitch 似乎不起作用。

我用这个 plunker 创建了这个问题的简化版本

这是组件 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() {
    }

}

奇怪的是我的 switch 正在寻找值“input”，即使它是在 case 中定义的，它仍然生成 null 绑定(bind)

Answer 1

你应该把它放在''

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