ngSwitch 不适用于字符串
ngSwitch does not work with string
我试图让 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}} </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 绑定
你应该把它放在里面 ''
<div *ngSwitchCase="'input''>
<div *ngSwitchCase="'Lama'"><div>Rendered</div></div>
我试图让 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}} </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 绑定
你应该把它放在里面 ''
<div *ngSwitchCase="'input''>
<div *ngSwitchCase="'Lama'"><div>Rendered</div></div>