- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我之前使用的是 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/
我可以只用 JavaScript 编写我的网站,并确保我的代码对任何人隐藏吗?在这方面,Node.js 是否可以像 Apache 一样通过互联网提供商访问? 最佳答案 您的两个问题的答案都是是。 No
正文应仅包含 bool 而不是 json 对象或数据。 我已经尝试将 bool 转换为 JSON 中的类型。 request.httpMethod = "PUT" let sessio
假设我们有这个html内容,我们愿意用正则表达式得到Content1, Content2,.. Content1 Content2 Content3 Content4 如果我使用下面的行 preg_m
1、LUA获取utf8字符串长度 复制代码 代码如下: --- 获取utf8编码字符串正确长度的方法 -- @param str -- @return number f
我刚刚观察到 if 而不是 -> , 我写 =>在函数的类型签名定义中,它不会导致编译时错误。示例代码: mysum :: Num a => [a] => a -- Notice => after t
所以我试图替换字符串中的任何非字母数字字符,包括空格。我找到了一个可行的解决方案,但感觉很糟糕。我不需要两个单独的替换函数来完成此操作,但我不知道如何正确合并它们。我在网上找到的所有文档都没有解决这个
我有一个字符串 'abc.132131.001.3' 。我想将每次出现的 '.' 替换为 '~'. 我用过 str.replace(/[.*?^${}()|[\]\\]/g, "\~$&"); 但是这
我有这个; let subs = []; for ( const item of items ) { // array for ( const sub of item ) { //
考虑下面来自 this AngularJS tutorial 的代码片段: app.factory('Auth', function ($firebaseSimpleLogin, FIREBASE
出于培训原因,我想编写一个小计算器。为什么要计算 10-6 = 16 而不是 10-6 = 4? 我得到了错误: Assertion Failed! Expression: calc("10-6")
代码如下: /// <summary> /// 将指定字符串按指定长度进行剪切, &nbs
假设我有以下示例: 示例一 $('.my_Selector_Selected_More_Than_One_Element').each(function() { $(this).stuff()
自 Flutter 1.12 发布以来,我的以下代码用于重新启动应用程序: final MyAppState state = context.ancestorStateOfType(const Typ
这行是什么意思: bool operator() (const song& s); I am not able to understand that line with operator. Is op
我在使用 mimetype="text/plain"的 django 模板时遇到了一些问题。 首先,url 的 s3 部分以 :80 结尾,然后实际图像 url 以 '%2f' 代替每个斜杠呈现。 o
目前,如果任意(OR)条件为true,.is()的结果将返回true,如何我是否让它使用AND,即仅在满足所有条件时返回true? if ($('#search-form #valid_only').
我用 C 语言创建了一个非常简单的链表程序。 #include #include int main(){ struct Int{ int num; struct
我有以下无法更改的 HTML 输出: link1;;;link 我怎样才能摆脱;所以结果变成: 链接1;链接2 这是我最好的尝试: var test = new String($(this).html
我有以下查询,它给出了正确的结果,但我想使用不存在而不是不存在。 select cust_name from customer where cust_id not in (select c
我使用 SilverStripe 3.5.6 进行自定义搜索,它将所有关键字分解为一个数组,并且仅返回包含所有单词的结果,而不返回包含其中一个单词的结果。 这只是脚本的一小部分,但这就是我使用过滤器功
我是一名优秀的程序员,十分优秀!