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

Question

我正在尝试根据用户想要查看的内容在很长的列表中切换元素的查看类别。我想切换查看所有内容，仅查看 session 、仅查看事件或什么都不查看。 (这是一个小例子我真的有大约 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 -->

所以我有以下复选框来切换可视元素:

<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

在我的 TypeScript Angular 组件中，我有以下功能:

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

如何在我的 Typescript 中更改类 cal-meeting 和 cal-event 的显示值？我假设只更改类的 CSS 值是最好的方法。

我试过:

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

但我收到一条错误消息“类型‘HTMLCollectionOf’上不存在属性‘style’”

Answer 1

尝试将您的选择转换为 HTMLElement

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

然后使用:

element.style.display = 'none';

你也可以使用 *ngif 来删除它，但是如果你想使用 javascript 的函数来改变样式，你应该将它转换为 HTMLElement 但您可以使用 angular [ngStyle]="{'property': expression}"来更改样式，例如:

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

或者你可以添加类，例如，如果你有这样的类:

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

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