angular 2 中的 ngSwitchCase 而不是 ngSwitchWhen
ngSwitchCase in angular 2 instead of ngSwitchWhen
我在使用 ngSwitchWhen & 现在我想使用 ngSwitchCase，我参考了这里的语法 https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html & 在我的应用程序中做了同样的事情。没有任何错误，但它也不能正常工作。上面 link 提供的示例中的 plunker 以某种方式使用了 ngSwitchWhen。
这是我的 sub.component.ts：
@Component({
selector: 'subjects',
templateUrl: 'app/subjects.component.html' ,
styleUrls: ['app/app.component.css'],
directives:[MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ProfileDetailsComponent,ROUTER_DIRECTIVES],
providers:[MdIconRegistry]
})
export class SubjectsComponent{
viewMode='first';
view='one';
stateNext: boolean = false;
private buttonState: boolean = true;
private classes1 = [{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false},{label: 'Science', state: false},{label: 'Computer Science', state: false},{label: 'Social science', state: false},{label: 'Environmental Studies', state: false}];
private classes6 = [{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false}];
private classes9 = [{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false}];
private classes11 =[{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false}];
private classes12 = [{label: 'Sanskrit', state: false},{label: 'Accounts', state: false},{label: 'Biology', state: false}];
setButtonState() {
let counter = 0;
for(let i=0;i<this.classes1.length;i++) {
if (this.classes1[i].state === true) {
counter++;
}}
if (counter >= 1) { this.buttonState = false; }
else {this.buttonState = true;}
}
setButtonState1() {
let counter = 0;
for(let i=0;i<this.classes6.length;i++) {
if (this.classes6[i].state === true) {
counter++;
}}
if (counter >= 1) { this.buttonState = false; }
else {this.buttonState = true;}
}
setButtonState2() {
let counter = 0;
for(let i=0;i<this.classes9.length;i++) {
if (this.classes9[i].state === true) {
counter++;
}}
if (counter >= 1) { this.buttonState = false; }
else {this.buttonState = true;}
}
setButtonState3() {
let counter = 0;
for(let i=0;i<this.classes11.length;i++) {
if (this.classes11[i].state === true) {
counter++;
}}
if (counter >= 1) { this.buttonState = false; }
else {this.buttonState = true;}
}
}
这是我的 sub.compnent.html:
<div style="margin-top:16px;">
<div class="scroll">
<ul style="list-style: none;">
<li style="margin-left:-50px;" ><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:4px; border-top: 4px solid #5171C3;" (click)="view='one'">
<h5 class="class">Class 1 to 5</h5>
</md-card></li>
<li style="margin-left:-50px;"><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #2EA83B;" (click)="view='two'">
<h5 class="class">Class 6 to 8</h5>
</md-card></li>
<li style="margin-left:-50px;" ><md-card class="new" style="height:60px;width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #BDB235;" (click)="view='three'">
<h5 class="class">Class 9 to 10</h5>
</md-card></li>
<li style="margin-left:-50px;" ><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #DE660F;" (click)="view='four'">
<h5 class="class">Class 11 to 12</h5>
</md-card></li>
</ul>
</div>
<div [ngSwitch]="view" >
<template [ngSwitchCase]="two">
<md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
<div style="background-color:#2EA83B;height:124px;width:243px;"></div>
<div style="padding-top:36px;"> <label *ngFor="let cb of classes6" style="font-size:14px;padding-left:12px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState1()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
</md-card>
</template>
<template [ngSwitchCase]="three">
<md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
<div style="background-color:#BDB235;height:124px;width:243px;"></div>
<div style="padding-top:36px;"> <label *ngFor="let cb of classes9" style="font-size:14px;padding-left:12px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState2()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
</md-card>
</template>
<template [ngSwitchCase]="four">
<md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
<div style="background-color:#DE660F;height:124px;width:243px;"></div>
<div style="padding-top:0px;">
<table style="margin-top: -38px;">
<tr>
<td style="padding-top:54px;">
<label *ngFor="let cb of classes11" style="font-size:14px;padding-left:6px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState3()" class="checkbox" checked/>{{cb.label}}<br/>
</label></td>
<td style="padding-left:10px;padding-top:54px;">
<label *ngFor="let cb of classes12" style="font-size:14px;padding-left:6px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState3()" class="checkbox" checked/>{{cb.label}}<br/>
</label>
</td>
</tr>
</table>
</div>
</md-card>
</template>
<template ngSwitchDefault="one">
<md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
<div style="background-color:#5171C3;height:124px;width:243px;"></div>
<div style="padding-top:36px;"> <label *ngFor="let cb of classes1" style="font-size:14px;padding-left:12px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
</md-card>
</template>
</div>
</div>
无论我点击哪个选项，我都会得到 html 的 ngSwitchDefault
我猜你想要的是
<template ngSwitchCase="four">
而不是<template [ngSwitchCase]="four">
或者
<template [ngSwitchCase]="'four'">
这个代码
<template [ngSwitchCase]="four">
查找 属性 four 的值，但我假设您想要的是字符串 "four"
我在使用 ngSwitchWhen & 现在我想使用 ngSwitchCase，我参考了这里的语法 https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html & 在我的应用程序中做了同样的事情。没有任何错误，但它也不能正常工作。上面 link 提供的示例中的 plunker 以某种方式使用了 ngSwitchWhen。 这是我的 sub.component.ts：
@Component({
selector: 'subjects',
templateUrl: 'app/subjects.component.html' ,
styleUrls: ['app/app.component.css'],
directives:[MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ProfileDetailsComponent,ROUTER_DIRECTIVES],
providers:[MdIconRegistry]
})
export class SubjectsComponent{
viewMode='first';
view='one';
stateNext: boolean = false;
private buttonState: boolean = true;
private classes1 = [{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false},{label: 'Science', state: false},{label: 'Computer Science', state: false},{label: 'Social science', state: false},{label: 'Environmental Studies', state: false}];
private classes6 = [{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false}];
private classes9 = [{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false}];
private classes11 =[{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false}];
private classes12 = [{label: 'Sanskrit', state: false},{label: 'Accounts', state: false},{label: 'Biology', state: false}];
setButtonState() {
let counter = 0;
for(let i=0;i<this.classes1.length;i++) {
if (this.classes1[i].state === true) {
counter++;
}}
if (counter >= 1) { this.buttonState = false; }
else {this.buttonState = true;}
}
setButtonState1() {
let counter = 0;
for(let i=0;i<this.classes6.length;i++) {
if (this.classes6[i].state === true) {
counter++;
}}
if (counter >= 1) { this.buttonState = false; }
else {this.buttonState = true;}
}
setButtonState2() {
let counter = 0;
for(let i=0;i<this.classes9.length;i++) {
if (this.classes9[i].state === true) {
counter++;
}}
if (counter >= 1) { this.buttonState = false; }
else {this.buttonState = true;}
}
setButtonState3() {
let counter = 0;
for(let i=0;i<this.classes11.length;i++) {
if (this.classes11[i].state === true) {
counter++;
}}
if (counter >= 1) { this.buttonState = false; }
else {this.buttonState = true;}
}
}
这是我的 sub.compnent.html:
<div style="margin-top:16px;">
<div class="scroll">
<ul style="list-style: none;">
<li style="margin-left:-50px;" ><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:4px; border-top: 4px solid #5171C3;" (click)="view='one'">
<h5 class="class">Class 1 to 5</h5>
</md-card></li>
<li style="margin-left:-50px;"><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #2EA83B;" (click)="view='two'">
<h5 class="class">Class 6 to 8</h5>
</md-card></li>
<li style="margin-left:-50px;" ><md-card class="new" style="height:60px;width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #BDB235;" (click)="view='three'">
<h5 class="class">Class 9 to 10</h5>
</md-card></li>
<li style="margin-left:-50px;" ><md-card class="new" style="height:60px; width:200px;margin-left: 31px;margin-top:22px; border-top: 4px solid #DE660F;" (click)="view='four'">
<h5 class="class">Class 11 to 12</h5>
</md-card></li>
</ul>
</div>
<div [ngSwitch]="view" >
<template [ngSwitchCase]="two">
<md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
<div style="background-color:#2EA83B;height:124px;width:243px;"></div>
<div style="padding-top:36px;"> <label *ngFor="let cb of classes6" style="font-size:14px;padding-left:12px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState1()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
</md-card>
</template>
<template [ngSwitchCase]="three">
<md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
<div style="background-color:#BDB235;height:124px;width:243px;"></div>
<div style="padding-top:36px;"> <label *ngFor="let cb of classes9" style="font-size:14px;padding-left:12px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState2()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
</md-card>
</template>
<template [ngSwitchCase]="four">
<md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
<div style="background-color:#DE660F;height:124px;width:243px;"></div>
<div style="padding-top:0px;">
<table style="margin-top: -38px;">
<tr>
<td style="padding-top:54px;">
<label *ngFor="let cb of classes11" style="font-size:14px;padding-left:6px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState3()" class="checkbox" checked/>{{cb.label}}<br/>
</label></td>
<td style="padding-left:10px;padding-top:54px;">
<label *ngFor="let cb of classes12" style="font-size:14px;padding-left:6px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState3()" class="checkbox" checked/>{{cb.label}}<br/>
</label>
</td>
</tr>
</table>
</div>
</md-card>
</template>
<template ngSwitchDefault="one">
<md-card style="height:307px; width:243px;margin-left: 251px;margin-top: -308px;background-color:white;">
<div style="background-color:#5171C3;height:124px;width:243px;"></div>
<div style="padding-top:36px;"> <label *ngFor="let cb of classes1" style="font-size:14px;padding-left:12px;">
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState()" class="checkbox" checked/>{{cb.label}}<br/>
</label></div>
</md-card>
</template>
</div>
</div>
无论我点击哪个选项，我都会得到 html 的 ngSwitchDefault
我猜你想要的是
<template ngSwitchCase="four">
而不是<template [ngSwitchCase]="four">
或者
<template [ngSwitchCase]="'four'">
这个代码
<template [ngSwitchCase]="four">
查找 属性 four 的值，但我假设您想要的是字符串 "four"