带有 Angular2 的 vmwClarity 中的 CrlTab
CrlTab in vmwClarity with Angular2
我在 Angular2 -> vmwCLARITY 中有一个包含月份的列表。
我的问题是我想要默认第一个月活跃,但我还是上个月 selected ->
代码HTML --->>>>
这里我得到了 1 个布尔值对象,然后我使用一个函数来激活我的 crl-tab。
另外,我禁用了几个月。然后我需要 select 启用第一个月。
所有月份的代码都相同。
<clr-tabs>
<clr-tab>
<button clrTabLink id="january" [disabled]="!selectedMonths.jan" (click)="changeMonth(1)">Enero</button>
<clr-tab-content id="january" *clrIfActive="isActive(selectedMonths.jan)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="february" [disabled]="!selectedMonths.feb" (click)="changeMonth(2)">Febrero</button>
<clr-tab-content id="february" *clrIfActive="isActive(selectedMonths.feb)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="march" [disabled]="!selectedMonths.mar" (click)="changeMonth(3)">Marzo</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.mar)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="april" [disabled]="!selectedMonths.apr" (click)="changeMonth(4)">Abril</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.apr)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="may" [disabled]="!selectedMonths.may" (click)="changeMonth(5)">Mayo</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.may)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="june" [disabled]="!selectedMonths.jun" (click)="changeMonth(6)">Junio</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.jun)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="juli" [disabled]="!selectedMonths.jul" (click)="changeMonth(7)">Julio</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.jul)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="august" [disabled]="!selectedMonths.aug" (click)="changeMonth(8)">Agosto</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.aug)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="september" [disabled]="!selectedMonths.sep" (click)="changeMonth(9)">Septiembre</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.sep)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="october" [disabled]="!selectedMonths.oct" (click)="changeMonth(10)">Octubre</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.oct)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="november" [disabled]="!selectedMonths.nov" (click)="changeMonth(11)">Noviembre</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.nov)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="december" [disabled]="!selectedMonths.dec" (click)="changeMonth(12)">Diciembre</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.dec)">
</clr-tab-content>
</clr-tab>
</clr-tabs>
Component.ts ->
public selectedMonths = this.service.months;
// Usada para que la marca roja se posicione en el primer mes activo
public redMark: boolean = false;
isActive(month: boolean) {
if (!this.redMark && month) {
this.redMark = true;
return true;
} else {
return false;
}
}
changeMonth() {
this.redMark = false;
}
这里我从我的 service.ts 中得到了 Object->moths,
我使用布尔值来停止红色标记。
现在我遇到了一个问题,因为所有月份都有 *clrIfActive = false,我在第一个月启用了 selected 但现在我无法更改其他月份...
示例 ->
我的红色标记是从 Julio 开始的,完美,但是如果我在 12 月点击,我的红色标记是在 Julio .....
我更改了这个-->
isActive(month: boolean) {
return month;
}
现在我的用户可以 select 其他月份,问题是红色标记是在十二月....
例子--->
现在我可以 select 其他月份,但问题是我的应用程序在上个月启用时以红色标记开始....
我需要在第一个月启动带有红色标记的应用程序。
谢谢。
编辑 ->
更改月份 -> 我为我的用户获取月份 selected,然后我调用 fecht 数据,因为我可以获得当月的数据。
public changeMonth = function (month: number) {
this.redMark = false;
this.month = month;
this.fetchData();
}
fetchData(){
this.service.getDataMonth(this.month).subscribe(
data => {
this.params = data;
});
}
默认情况下,将显示第一个选项卡,除非您另有指定。
在您的情况下,您希望第一个非禁用选项卡具有 *clrIfActive="true"
。由于您没有共享您的组件的代码,我无法帮助您,但在几个月内反复查找它应该不会太难。
我在 Angular2 -> vmwCLARITY 中有一个包含月份的列表。
我的问题是我想要默认第一个月活跃,但我还是上个月 selected ->
代码HTML --->>>>
这里我得到了 1 个布尔值对象,然后我使用一个函数来激活我的 crl-tab。 另外,我禁用了几个月。然后我需要 select 启用第一个月。
所有月份的代码都相同。
<clr-tabs>
<clr-tab>
<button clrTabLink id="january" [disabled]="!selectedMonths.jan" (click)="changeMonth(1)">Enero</button>
<clr-tab-content id="january" *clrIfActive="isActive(selectedMonths.jan)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="february" [disabled]="!selectedMonths.feb" (click)="changeMonth(2)">Febrero</button>
<clr-tab-content id="february" *clrIfActive="isActive(selectedMonths.feb)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="march" [disabled]="!selectedMonths.mar" (click)="changeMonth(3)">Marzo</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.mar)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="april" [disabled]="!selectedMonths.apr" (click)="changeMonth(4)">Abril</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.apr)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="may" [disabled]="!selectedMonths.may" (click)="changeMonth(5)">Mayo</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.may)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="june" [disabled]="!selectedMonths.jun" (click)="changeMonth(6)">Junio</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.jun)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="juli" [disabled]="!selectedMonths.jul" (click)="changeMonth(7)">Julio</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.jul)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="august" [disabled]="!selectedMonths.aug" (click)="changeMonth(8)">Agosto</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.aug)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="september" [disabled]="!selectedMonths.sep" (click)="changeMonth(9)">Septiembre</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.sep)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="october" [disabled]="!selectedMonths.oct" (click)="changeMonth(10)">Octubre</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.oct)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="november" [disabled]="!selectedMonths.nov" (click)="changeMonth(11)">Noviembre</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.nov)">
</clr-tab-content>
</clr-tab>
<clr-tab>
<button clrTabLink id="december" [disabled]="!selectedMonths.dec" (click)="changeMonth(12)">Diciembre</button>
<clr-tab-content *clrIfActive="isActive(selectedMonths.dec)">
</clr-tab-content>
</clr-tab>
</clr-tabs>
Component.ts ->
public selectedMonths = this.service.months;
// Usada para que la marca roja se posicione en el primer mes activo
public redMark: boolean = false;
isActive(month: boolean) {
if (!this.redMark && month) {
this.redMark = true;
return true;
} else {
return false;
}
}
changeMonth() {
this.redMark = false;
}
这里我从我的 service.ts 中得到了 Object->moths, 我使用布尔值来停止红色标记。
现在我遇到了一个问题,因为所有月份都有 *clrIfActive = false,我在第一个月启用了 selected 但现在我无法更改其他月份...
示例 ->
我的红色标记是从 Julio 开始的,完美,但是如果我在 12 月点击,我的红色标记是在 Julio .....
我更改了这个-->
isActive(month: boolean) {
return month;
}
现在我的用户可以 select 其他月份,问题是红色标记是在十二月....
例子--->
现在我可以 select 其他月份,但问题是我的应用程序在上个月启用时以红色标记开始....
我需要在第一个月启动带有红色标记的应用程序。
谢谢。
编辑 ->
更改月份 -> 我为我的用户获取月份 selected,然后我调用 fecht 数据,因为我可以获得当月的数据。
public changeMonth = function (month: number) {
this.redMark = false;
this.month = month;
this.fetchData();
}
fetchData(){
this.service.getDataMonth(this.month).subscribe(
data => {
this.params = data;
});
}
默认情况下,将显示第一个选项卡,除非您另有指定。
在您的情况下,您希望第一个非禁用选项卡具有 *clrIfActive="true"
。由于您没有共享您的组件的代码,我无法帮助您,但在几个月内反复查找它应该不会太难。