未捕获的 ReferenceError: sel 未在 HTMLDivElement.onclick 中定义

Question

每当我点击 div 时，都会出现错误“未捕获的 ReferenceError：sel 未在 HTMLDivElement.onclick 中定义” 我目前正在研究角度 8。它给了我这个错误。我看到了一些与错误相关的相同帖子，但没有人真正解决我的问题

任何帮助将不胜感激谢谢！

我的 HTML 代码

<div id="container">
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    </div>

我的 TS 代码

import { Component, OnInit  } from '@angular/core';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'samarsolprac';

  constructor() { }

 sel(id) {
    var divs = document.getElementById('container').getElementsByTagName('div');
    for(var i=0;i<divs.length; i++) {
        if(divs[i]!=id) {
            divs[i].className='items';
        }
    }
    id.className= 'selitem';
}

    ngOnInit() {
    }


}

我的 CSS 代码

import { Component, OnInit  } from '@angular/core';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'samarsolprac';

  constructor() { }

 sel(id) {
    var divs = document.getElementById('container').getElementsByTagName('div');
    for(var i=0;i<divs.length; i++) {
        if(divs[i]!=id) {
            divs[i].className='items';
        }
    }
    id.className= 'selitem';
}

    ngOnInit() {
    }


}

.items
{
    display:block;
    width:200px;
    background-color:white;
    color:black;
    cursor:pointer;
    margin-bottom:5px;
}
.items:hover
{
    background-color:blue;
    color:white;
}
/* css for selected div*/
.selitem
{
    display:block;
    width:200px;
    background-color:red;
    color:yellow;
    cursor:pointer;
    margin-bottom:5px;

}

 <div id="container">
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    <div class="items" onclick="sel(this)">one</div>
    </div>

.items
{
    display:block;
    width:200px;
    background-color:white;
    color:black;
    cursor:pointer;
    margin-bottom:5px;
}
.items:hover
{
    background-color:blue;
    color:white;
}
/* css for selected div*/
.selitem
{
    display:block;
    width:200px;
    background-color:red;
    color:yellow;
    cursor:pointer;
    margin-bottom:5px;

}

Answer 1

  <div id="container">
        <div class="items" (click)="sel(this)">one</div>
        ...
    </div>

在这种情况下this指的是组件本身

所以你可以这样做：

打字稿：

  public sel(event): void {
    const divs = document.getElementById('container').getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
      if (divs[i] !== event.target) {
        divs[i].className = 'items';
      }
    }
    event.target.className = 'selitem';
  }

html：

<div id="container">
  <div class="items" (click)="sel($event)">one</div>
  <div class="items" (click)="sel($event)">one</div>
  <div class="items" (click)="sel($event)">one</div>
  <div class="items" (click)="sel($event)">one</div>
  <div class="items" (click)="sel($event)">one</div>
  <div class="items" (click)="sel($event)">one</div>
  <div class="items" (click)="sel($event)">one</div>
</div>

Answer 2

使用(click) 代替onclick，如下所示

<div id="container">
  <div class="items" (click)="sel(this)">one</div>
  ...
</div>