Angular 找不到名称“srcelelement”

我有两个按钮用于呕吐，点击时我会调用一种方法，比较上下点击的次数，并根据结果改变背景颜色

但是编辑器显示找不到名称“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';
  }

}

这是模板

{{post.title}} 爱死它了！ 不要爱它！ 在引用模板/component.html上的DOM元素时，可以使用

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

<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> 

我创造了一个新的世界

或者，更好的解决方案是使用ngClass，根据每个帖子的“是”和“否”投票数，有条件地应用类.list group item success和.list group item danger

---

.

我将采用与wentjun相同的方法添加属性yes和no，但我不会从TS文件中操作DOM，相反，我们可以使用ngClass和应用样式类。比如说像这样的课程：

.blue-bg {
  background-color: blue;
}

.red-bg {
  background-color: red;
}

.white-bg {
  background-color: white;
}

如果您有一个现有的帖子数组，则可以使用以下内容添加新属性：

this.posts=this.posts.mappost=>{return{…post，yes:0，no:0}； 然后为按钮（如wentjun）添加单击处理程序并传递索引：

爱死它了！ 不要爱它！ 以及相应的功能：

奥涅西：号码{ this.posts[i].yes++； } 安诺伊：号码{ this.posts[i].no++； } 然后在模板中标记ngClass中的条件：

[ngClass]=[post.yes>post.no.“蓝色背景”：， post.yes演示：我从Wentjun的stackblitz中很好地找到了它

srcElement来自哪里？它应该是@SilverMind的按钮这不是一个很清楚的例子。。你试过使用某种模板引用变量吗？@wentjun我已经将模板添加到帖子中了。我认为这应该可以解决你的问题，你只需要获取元素引用就可以了。谢谢！但它并不完美。。举个例子，如果我有两个帖子，我想投第二个，投票只会投第一个，如果我投第二个，或者投反对票，所有的都会投第一个，改变只会投第二个it@alex是的，我知道。这是简化的代码。我回答的要点是展示你可以使用模板引用变量来改变元素的CSS属性：好的，但是你能指导我如何解决这个问题以将它们分开吗？我对这门语言掌握得不太好hi@wentjun我只是想告诉你我成功地达到了目标。。还要感谢你的耐心哈：这是意料之中的感谢你为回答这个问题付出的努力。。你的代码也很好，但你知道我不能接受不止一个答案，因为文俊在你之前，我不得不承认他的答案：从ts文件操纵DOM是最好的方法？我个人的意见是，如果可能的话，不要以任何方式操纵DOM。我们有其他工具来做你需要的事情。另外，例如angular团队对操作DOM发出警告：我只是把不从TS中操作DOM作为一条经验法则，如果可能的话，因此我更喜欢我的解决方案，我猜我有点偏见tho，哈哈，但是是的，接受你认为更适合你的答案。如果你认为文俊的回答更适合你，我同意他；

<ul class="list-group">    
  <li class="list-group-item" *ngFor="let post of posts; let i = index"> 
    <p [ngClass]="{
      'list-group-item-success': post.yes > post.no,
      'list-group-item-danger': post.yes < post.no}" 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> 
    </p>
  </li>    
</ul> 

.list-group-item-success {
  background-color: blue;
}

.list-group-item-danger {
  background-color: red;
}

.blue-bg {
  background-color: blue;
}

.red-bg {
  background-color: red;
}

.white-bg {
  background-color: white;
}