Question

我有2个投票按钮，单击时我将方法称为“ onWhich”，该方法比较上下点击的次数，并根据结果更改背景颜色

但是编辑器显示“找不到名称'srcElement”

也许我的方法不完整。...

yes= 0;
no = 0;

  constructor() { }

  ngOnInit() {
  }


onYes(index: number){
this.yes ++;
this.onWhich();
}

onNo(index: number){
this.no ++;
this.onWhich();
}

onWhich(){
  if(this.yes > this.no){
    srcElement.parentElement.style.backgroundColor = 'blue';
  }else if(this.yes < this.no){
    srcElement.parentElement.style.backgroundColor = 'red';
  }else{
    srcElement.parentElement.style.backgroundColor = 'white';
  }

}

这是模板

<ul class="list-group">
    
   <li class="list-group-item" *ngFor="let post of posts; let i = index"> 


      <p style="font-size:35px;"> {{  post.title }} 
      
                   
   <button class="btn btn-success"  (click)="onYes(i)" >Love it!</button> &nbsp;
   <button class="btn btn-danger" (click) ="onNo(i)">Don't love it!</button> <br>


    </li>    
        
 </ul>

Answer 1

在引用template / component.html上的DOM元素时，您可以使用template reference variables。

首先，我们使用#字符来声明两个按钮的模板引用变量。

<ul class="list-group">    
  <li class="list-group-item" *ngFor="let post of posts; let i = index"> 
    <p style="font-size:35px;"> {{  post.title }} 
    <button class="btn btn-success"  (click)="onYes(i)" #buttonYes>Love it!</button> &nbsp;
    <button class="btn btn-danger" (click) ="onNo(i)" #buttonNo>Don't love it!</button> <br>
  </li>    
</ul>

在您的component.ts上，我们使用@ViewChildren访问ngFor中的参考变量列表。我们还将把clicked按钮的索引传递给绑定到click事件的方法。这将允许组件逻辑访问被单击的索引，从而使用索引为QueryList中元素的索引提供引用。

请注意，我们必须使用.ToArray()作为数组从QueryList返回结果的副本，以便我们可以通过其索引访问QueryList中的每个元素。有关QueryList用法的更多详细信息，请随时参考documentation。

import { Component, ViewChildren, ElementRef, QueryList } from '@angular/core';
.
.
posts = [{
 title: 'AAA',
 yes: 0,
 no: 0 
},{
 title: 'BBB',
 yes: 0,
 no: 0 
}, {
 title: 'CCC',
 yes: 0,
 no: 0  
}];

onYes(index: number){
  this.posts[index].yes++;
  this.onWhich(index);
}

onNo(index: number){
  this.posts[index].no++;
  this.onWhich(index);
}

onWhich(index: number){
  const parentNode = this.buttonYes.toArray()[index].nativeElement.parentNode;
  if (this.posts[index].yes > this.posts[index].no) {
    parentNode.style.backgroundColor = 'blue';
  } else if (this.posts[index].no > this.posts[index].yes) {
    parentNode.style.backgroundColor = 'red';
  } else{
    parentNode.style.backgroundColor = 'white';
  }    
}

我创建了一个demo。

找不到名称“ srcElement”

1 个答案: