Angular 无法读取属性'；切换'；未定义的_Angular

Angular 无法读取属性'；切换'；未定义的

angular

Angular 无法读取属性'；切换'；未定义的,angular,Angular,试图实现一个三栏菜单图标，点击后变成“X”。不确定为什么切换未定义。有人能解释一下我哪里出了问题吗从app.component.ts： import { Component} from '@angular/core'; @Component({ selector: 'app-root', template: ` <body> <div class ='bg'> <br> <d

试图实现一个三栏菜单图标，点击后变成“X”。不确定为什么切换未定义。有人能解释一下我哪里出了问题吗

从app.component.ts：

import { Component} from '@angular/core';
    @Component({
      selector: 'app-root',
      template: ` 
      <body>
        <div class ='bg'> <br>
        <div class='interactivemenu' (click)="cool(this)"> 
        <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      </div>
        <div id='menubar'>
            <ul class='menu'>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='home' [routerLink]="['/home']">Home</a></li>
              <li><a class='nav-link' routerLinkActive='active'class="menu" id='resume' [routerLink]="['/resume']">Resume</a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='projects'[routerLink]="['/projects']">Projects</a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='about'[routerLink]="['/about']">About </a></li>
              <li><a class='nav-link' routerLinkActive='active' class="menu" id='contact'[routerLink]="['/contact']">Contact </a></li>
              </ul>
             </div><br>
        <div id='slideshow'> SLIDESHOW</div>
        <div class='container'>
          <router-outlet></router-outlet>
        </div>
        <div id= 'footer'>
        <a href='http://www.instagram.com'> <img src= './assets/instagram-vector-png--400.png' alt='instagram'></a>
        <a href='http://www.twitter.com'> <img src= './assets/Twitter_Social_Icon_Rounded_Square_Color.png' alt='twitter' class="twitter"></a>
         <a href='http://www.facebook.com'><img src= './assets/f_logo_RGB-Hex-Blue_512.png' alt='facebook' class="facebook"></a>
        </div>
        </div>
        </body>
        `,
      styleUrls: ['./app.component.css']
    }


    )


    export class AppComponent {
        pageTitle = "Practice";

        cool (x:any){
         x.classList.toggle("change");
        }
    }

从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
模板：`




`,
样式URL:['./app.component.css']
}
)
导出类AppComponent{
pageTitle=“实践”；
酷（x：任何）{
x、 切换（“更改”）；
}
}

您可能希望尽可能避免修改DOM。此外，使用ngClass可以更容易地检测和响应这些更改

尝试一下：

@Component({
        selector: 'app-root',
        template: `
            <body>
            <div class='bg'><br>
                <div class='interactivemenu' (click)="toggleMenu()" [ngClass]="[{'change': menuActive}]">
                    <div class="bar1"></div>
                    <div class="bar2"></div>
                    <div class="bar3"></div>
                </div>
                <!-- the rest of your page -->
            </div>
            </body>
        `,
        styleUrls: ['./app.component.css']
    }
)

export class AppComponent {
    public pageTitle = 'Practice';
    public menuActive: boolean = false;

    public toggleMenu() {
        this.menuActive = !this.menuActive;
    }
}

@组件({
选择器：'应用程序根'，
模板：`


`,
样式URL:['./app.component.css']
}
)
导出类AppComponent{
公共页面标题=‘实践’；
public menuActive:boolean=false；
公共切换菜单（）{
this.menuActive=！this.menuActive；
}
}

x.classList.toggle（“更改”）