未捕獲的 ReferenceError：sel 未在 HTMLDivElement.onclick 中定義

Question

每當我點擊 div 時，它都會給我錯誤“Uncaught ReferenceError: sel is not defined at HTMLDivElement.onclick”我目前正在處理 angular 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>

在這種情況下，這是指組件本身

所以你可以這樣做：

打字稿：

  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>