angular - 带有 Angular2 的 vmwClarity 中的 CrlTab

问题描述

我在 Angular2 -> vmwCLARITY 中有一个包含月份的列表。

我的问题是我希望默认第一个月处于活动状态，但我得到或选择了最后一个月->

代码 HTML --->>>>

在这里，我得到 1 个带有布尔值的对象，然后我使用一个函数来激活我的 crl-tab。另外，我禁用了几个月。然后我需要选择启用的第一个月。

所有月份的代码都是相同的。

<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>

组件.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，我选择了第一个月，但现在我无法更改其他月份...

示例->

我的红色标记从 Julio 开始，完美，但如果我在 12 月点击，我的红色标记在 Julio .....

我把它改成了 -->

isActive(month: boolean) { 
      return month;
}

现在我的用户可以选择其他月份，问题是红色标记是在 12 月....

示例--->

现在我可以选择其他月份，但问题是我的应用程序在上个月启用了红色标记......

我需要在第一个月启用红色标记的启动应用程序。

谢谢。

编辑->

更改月份-> 我为我的用户选择了月份，然后我调用了 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;
                    });
      }

标签： angularvmware-clarityclarity

angular - 带有 Angular2 的 vmwClarity 中的 CrlTab

问题描述

解决方案

推荐阅读