gpt4 book ai didi

angular - Angular 2 中的 ngSwitchCase 代替 ngSwitchWhen

转载 作者:行者123 更新时间:2023-12-03 02:19:35 24 4
gpt4 key购买 nike

我之前使用的是 ngSwitchWhen & 现在我想使用 ngSwitchCase,我引用了这里的语法 https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html & 在我的应用程序中做了同样的事情。没有任何错误,但它也不能正常工作。不知何故,上面链接中提供的示例中可用的 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>

无论我点击哪个选项,我都会得到 ngSwitchDefault 的 html

最佳答案

我猜你想要的是

<template ngSwitchCase="four">

而不是 <template [ngSwitchCase]="four">

或者

<template [ngSwitchCase]="'four'">

这段代码

<template [ngSwitchCase]="four">

查找属性的值four但我假设你想要的是字符串 "four"

关于angular - Angular 2 中的 ngSwitchCase 代替 ngSwitchWhen,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38457269/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com