У меня есть список с месяцами в Angular2 -> vmwCLARITY.
Моя проблема в том, что я хочу по умолчанию первый активный месяц, но я получаю или последний выбранный месяц ->
КОД HTML --- >>>>
Здесь я получаю 1 объект с логическими значениями, затем я использую функцию для активной моей crl-вкладки.Кроме того, я отключил несколько месяцев.Затем мне нужно выбрать первый включенный месяц.
Код одинаков для всех месяцев.
<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;
}
Здесь я получаюObject-> moths из моего service.ts, я использую логическое значение для остановки красной метки.
Теперь у меня проблема, потому что все месяцы, имеющие * clrIfActive = false, у меня был выбран первый месяц, но теперь я могуНе меняйте другой месяц ...
Пример ->
Моя красная отметка начинается в Хулио, идеально, но если янажмите в декабре, моя красная отметка на Хулио .....
Я изменил это на ->
isActive(month: boolean) {
return month;
}
Теперь мой пользователь может выбрать другой месяц, проблема в том, чтокрасная метка в декабре ....
Пример --->
Теперь я могу выбрать другой месяц, нопроблема в том, что мое приложение запускается с красной меткой за последний месяц, включенной ....
Мне нужно запустить приложение с красной меткой за первый месяц.
Спасибо.
Редактировать ->
Изменить месяц -> Я выбрал месяц, выбранный для моего пользователя, и затем я вызываю данные 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;
});
}