角度为2的ngSwitchCase而不是ngSwitchWhen [英] ngSwitchCase in angular 2 instead of ngSwitchWhen
本文介绍了角度为2的ngSwitchCase而不是ngSwitchWhen的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用ngSwitchWhen&现在我想使用ngSwitchCase，我在这里提到了语法 https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html &在我的应用程序中做了同样的事情.没有任何错误，但也无法正常工作.对于提供的示例，上述链接中的可用插件会使用ngSwitchWhen. 这是我的sub.component.ts:
I was using ngSwitchWhen & now I want to use ngSwitchCase, I referred to the syntax here https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html & did the same in my application. There aren't any errors but it isn't working fine either. Somehow the plunker available in the above link for the example provided uses ngSwitchWhen. Here's my 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:
Here's my 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>
无论我单击哪个选项，都将获得ngSwitchDefault的
No matter which ever option I click, I am getting the html of ngSwitchDefault
推荐答案
我想你想要的是
<template ngSwitchCase="four">
而不是<template [ngSwitchCase]="four">
或者
<template [ngSwitchCase]="'four'">
此代码
<template [ngSwitchCase]="four">
查找属性four的值，但我假设您想要的是字符串"four"
looks up the value of the property four but I assume what you want is the string "four"
这篇关于角度为2的ngSwitchCase而不是ngSwitchWhen的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
