javascript - 我的 draw() 方法中的 classList 和 dataset 高亮错误，为什么？

Question

    //my TS file:

正如您在我的 draw() 方法中看到的那样，classList 和 dataset 都是高亮错误，我不知道为什么？

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-game',
      templateUrl: './game.component.html',
      styleUrls: ['./game.component.css'],
    })
    export class GameComponent implements OnInit {
      cards = document.querySelectorAll<HTMLElement>('.card');
     
      winner = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [1, 5, 9],
        [3, 5, 7],
        [1, 4, 7],
        [2, 5, 8],
        [3, 6, 9],
      ];
      firstPlayer = [];
      secondPlayer = [];
      count = 0;
    
      check(array) {
        let finalResult = false;
        for (let item of this.winner) {
          let res = item.every((val) => array.indexOf(val) !== -1);
          if (res) {
            finalResult = true;
            break;
          }
        }
        return finalResult;
      }
    
      constructor() {
        this.cards.forEach((card) => card.addEventListener('click', this.draw));
      }
    
      ngOnInit(): void {}
    
      winnerPlayer(p) {
        const modal = document.createElement('div');
        const player = document.createTextNode(p);
        const replay = document.createElement('button');
    
        modal.classList.add('winner');
        modal.appendChild(player);
        replay.appendChild(document.createTextNode('Replay'));
    
        replay.onclick = () => {
          this.rep();
        };
        modal.appendChild(replay);
        document.body.appendChild(modal);
      }

问题在这里 vscode 向我显示此消息“类型'GameComponent'.ts（2339）上不存在属性'classList'和'dataset'”

      draw() {
        if (this.cards == 'card') {
          this.count++;
          if (this.count % 2 !== 0) {
            this.classList.add("x")
            this.firstPlayer.push(Number(this.dataset.index));
            if (this.check(this.firstPlayer)) {
              this.winnerPlayer('Bravo player one you win');
            }
          } else {
            this.classList.add('o');
            this.secondPlayer.push(Number(this.dataset.index));
            if (this.check(this.secondPlayer)) {
              this.winnerPlayer('Bravo player two you win');
            }
          }
          if (this.count === 9) {
            this.winnerPlayer('Draw');
          }
        }
      }
    
      rep() {
        const w = document.querySelector('.winner');
        this.firstPlayer = [];
        this.secondPlayer = [];
        this.count = 0;
        w.remove();
      }
    }
    
    //-------------------------------------------------------------------
    //My HTML file:
    

    <div class="container">
      <div class="card" data-index="1"></div>
      <div class="card" data-index="2"></div>
      <div class="card" data-index="3"></div>
      <div class="card" data-index="4"></div>
      <div class="card" data-index="5"></div>
      <div class="card" data-index="6"></div>
      <div class="card" data-index="7"></div>
      <div class="card" data-index="8"></div>
      <div class="card" data-index="9"></div>
    </div>
    
    //--------------------------------------

问题在我的 draw() 方法中的 classList 和 dataset 中；我不知道解决方案??!!!

标签： javascripthtmlangulartypescript