Question

APP摘要：

我正在构建一个用户猜测RGB值的应用，如果猜测值为真，那么它会将所有这些元素更改为相同颜色，如果猜测值为不然，它会隐藏所选元素，用户可以从其余元素中猜测。

问题：

我在我的voter.component.html文件中添加了这个，但它无法正常工作

<a href="#"> <li (click)="compare(i)? style.background-color='rgb({{item}})' :style.display='none'" style.background-color="rgb({{item}})"></li>

Here is my stackblitz code

Answer 1

试试这个

compare(i) {
    if (this.comparison_variable == this.list[i]) {
      this.list.forEach((element, index) => {
        this.list[index] = this.comparison_variable;
      });
      return true;
    }
    else {
     this.list[i] = 'your default color';
     return false;
    }
}

Answer 2

尝试像这样传递元素处理程序：

.HTML

<a href="#"> 
    <li #elem (click)="compare(i, elem)>
</li>

.TS

compare(i: number, element: any){
   if(i === numberToCheck){
       element.style.display = 'none'         
   }
}

更新：

你的比较功能：

compare(i, element)
  {
    if(this.list[1]==this.list[i])
    {
      for(let k = 0; k < this.list.length; k++){
        this.list[k] = this.list[i]
      }
      return true;
    }
    else
    {
      element.style.display = 'none';
      return false;
    }

  }

如果返回值不为真，则隐藏单击的元素（Angular 4）

2 个答案: