[英]Angular2 how to change styles of css classes in typescript?
I am trying to toggle viewing categories of items within a very long list, based on what the user wants to see.我正在尝试根据用户想要查看的内容来切换查看很长列表中的项目类别。 I want to toggle viewing everything, just meetings, just events or nothing.
我想切换查看所有内容,仅查看会议、仅查看事件或什么都不查看。 (this is a small example I really have about 15 categories)
(这是一个小例子,我确实有大约 15 个类别)
<ul>
<li class="cal-meeting">meeting title</li>
<li class="cal-event">event title</li>
<!-- … the list goes on with various events and meetings -->
So I have the following checkboxes to toggle the viewable items:所以我有以下复选框来切换可查看项目:
<input type="checkbox" checked (click)="toggleCal('meeting')">
<input type="checkbox" checked (click)="toggleCal('event')">
// checkboxes are initially checked however I will make this dynamic saved in DB for user preference
In my angular component in TypeScript I have the function:在我的 TypeScript 的 angular 组件中,我有 function:
toggleCal(toggle_items) {
if (toggle_items === 'meeting') {
// this.display_meeting is initially set to true in ngOnInit
this.display_meeting = !this.display_meeting;
if ( this.display_meeting ) {
// set class cal-meeting to display: block;
} else {
// set class cal-meeting to display: none;
}
}
// do the same thing if toggle_items === 'event'
}
How do I change the display value of the classes cal-meeting and cal-event in my Typescript?如何更改 Typescript 中 cal-meeting 和 cal-event 类的显示值? I assume just changing the CSS values of the classes is the best way.
我假设只是更改类的 CSS 值是最好的方法。
I did try:我确实尝试过:
document.getElementsByClassName('cal-meeting').style.display = 'none';
But I get an error saying "Property 'style' does not exist on type 'HTMLCollectionOf'"但我收到一条错误消息,提示“'HTMLCollectionOf' 类型上不存在属性 'style'”
try to convert your selection as HTMLElement尝试将您的选择转换为 HTMLElement
const element = <HTMLElement> document.getElementsByClassName('cal-meeting')[0];
then use:然后使用:
element.style.display = 'none';
also you can use *ngif for remove it but if you want to use javascript's function to change style you should convert it to HTMLElement but you can use angular [ngStyle]="{'property': expression}" for changing style like:您也可以使用 *ngif 将其删除,但如果您想使用 javascript 的 function 更改样式,则应将其转换为 HTMLElement 但您可以使用 angular [ngStyle]="{'property': expression}" 更改样式,例如:
<li class="cal-meeting" [ngStyle]="{'display': !this.display_meeting ? 'none': 'block'}">meeting title</li>
or you can add class for example if you have class like:或者您可以添加 class 例如,如果您有 class ,例如:
.d-none: {display: none}
.d-block: {display: block}
you can use it in typescript like:您可以在 typescript 中使用它,例如:
export class MyComponent implements OnInit {
hidingClass: string = '';
toggleCal(toggle_items) {
if (toggle_items === 'meeting') {
this.display_meeting = !this.display_meeting;
if ( this.display_meeting ) {
this.hidingClass = 'd-block'
} else {
this.hidingClass = 'd-none'
}
}
// do the same thing if toggle_items === 'event'
}
just use it in your html element:只需在您的 html 元素中使用它:
<li class="cal-meeting" [ngClass]="hidingClass">meeting title</li>
If it's just toggle the view, why you did not put something simple like this如果它只是切换视图,为什么你没有像这样简单
<li class="cal-meeting" *ngIf="this.display_meeting">meeting title</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.