Angular2如何更改typescript中css类的样式？

我试图根据用户希望看到的内容，在一个很长的列表中切换项目的查看类别。我想切换查看所有内容，仅查看会议、事件或其他内容。（这是一个小例子，我有大约15个类别）

如何更改Typescript中类cal meeting和cal event的显示值？我认为改变类的CSS值是最好的方法

我确实试过：

document.getElementsByClassName('cal-meeting').style.display = 'none';

---

但是我得到一个错误，说“属性'style'在类型'HTMLCollectionOf'上不存在”

尝试将您的选择转换为HTMLElement

const element = <HTMLElement> document.getElementsByClassName('cal-meeting')[0];

您也可以使用*ngif来删除它，但如果您想使用javascript的函数来更改样式，您应该将其转换为HtmleElement 但您可以使用angular[ngStyle]=“{'property'：expression}”更改样式，如：

<li class="cal-meeting" [ngStyle]="{'display': !this.display_meeting ? 'none': 'block'}">meeting title</li>

您可以在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'
}

只需在html元素中使用它：

<li class="cal-meeting" [ngClass]="hidingClass">meeting title</li>

会议名称

---

如果只是切换视图，为什么不放一些像这样简单的东西

<li class="cal-meeting" *ngIf="this.display_meeting">meeting title</li>

会议标题

---

？getElementsByClassName提供了一个元素数组，而不是元素，因此我认为您应该在元素上使用一个循环，将

*ngIf

添加到

li

元素-

会议标题中不是更好。这可确保仅当
display\u meeting
设置为
true
时才显示项目。根据的一个小更正是，在使用ngStyles时，在CSS对象周围添加双引号（“），即
[ngStyle]=“{'display'：myDisplay；'color'：'blue'}”
，以防止
意外的字符“EOF”（模板中是否有一个未转义的“{”字符？使用“{{{{{}}”）对其进行转义。
。谢谢，我忘记了
<li class="cal-meeting" [ngStyle]="{'display': !this.display_meeting ? 'none': 'block'}">meeting title</li>

.d-none: {display: none}
.d-block: {display: block}

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

<li class="cal-meeting" [ngClass]="hidingClass">meeting title</li>

<li class="cal-meeting" *ngIf="this.display_meeting">meeting title</li>