Angular 6 - поменять стиль флажка, установлен ли флажок - PullRequest
Новая
       31

Angular 6 - поменять стиль флажка, установлен ли флажок

0 голосов
/ 01 марта 2019

У меня есть список флажков, и я хочу подчеркнуть тот, который отмечен.Мой код выглядит следующим образом:

Файл TS: 

currentQuarter: string;
quarters: Observable<MeseRiferimento[]>;
q1: MeseRiferimento = new MeseRiferimento();
q2: MeseRiferimento = new MeseRiferimento();

ngOnInit() {
q1.desc = "One";
q1.id = "1";

q2.desc = "Two";
q2.id = "2"

currentQuarter = q1.id;
quarters.of([q1, q2]);
}

isQuarterSelected(q: MeseRiferimento): boolean {
return this.currentQuarter === this.getKeyFromQuarter(q);
}

Файл HTML: 

<div *ngFor="let q of quarters | async" class="col-1 my-auto m-stati">
<label class="custom-control custom-checkbox ra-check">
<input type="checkbox" class="custom-control-input" [ngClass]="{'checked': isQuarterSelected(q) }">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{q.descrizione}}</span>
</label>
</div>

CSS-файл: 

.custom-control-input:checked~.custom-control-indicator {   
color: #fff;   
background-color: #3bb8eb; 
}

Это проблема с этим кодом:
1. Когда я загружаю страницу, флажок по умолчанию установлен правильно, класс «флажок», но CSSне применяется, т. е. не подчеркнуто
2. когда я вручную устанавливаю флажок, класс «флажок» применяется правильно, а CSS тоже применяется
3. когда я вручную выбираю другой флажок, класс «флажок» правильно переключаетсяот одного к другому, но CSS первого не обновляется, т. е. предыдущий флажок остается подчеркнутым

Спасибо за любой совет.

1 Ответ

0 голосов
/ 01 марта 2019 
.custom-control-input:checked~.custom-control-indicator

:checked не означает, что у него есть класс checked, но это означает, что он действительно проверен.Если вы хотите выбрать класс checked, используйте точку вместо двоеточия: 

.custom-control-input.checked~.custom-control-indicator
...