我有一个生成背景颜色的功能（可以正常工作），但是问题是当我单击屏幕上的任意位置时，有时甚至滚动页面时，都会一次又一次地更改背景颜色。

HTML：

import zio._
import zio.console.{Console,putStrLn}
import zio.stream._
object InnerProduct extends App {

  val stream1: Stream[Nothing,Int] = Stream(1,2,3,4)
  val stream2: Stream[Nothing,Int] = Stream(4,5,6,7)


  def inner_fold [A,B,C,D,E](stream1:Stream[Nothing,A])(stream2:Stream[Nothing,B])(tms: (A,B) => C)(pls: (D,C) => D)(zero: D)= for{
    acc <- Ref.make(zero)
    acc2 <- acc.get
    i = 0
    compStream = stream1.zip(stream2)
    str = compStream.map(i => tms(i._1,i._2))
    streamFold<- str.fold(acc2)(pls)
    _ <-acc.set(streamFold)
  } yield acc

  override def run(args: List[String]) =
    for {
    res <- inner_fold[Int,Int,Int](stream1)(stream2)(_ * _)(_ + _ )(0)
      res2 <-res.get
      _ <- putStrLn(res2.toString)
    } yield (0)

}

.ts

<ion-button shape="round" color="clear" [ngStyle]="{'background':getRandomColor(),'border-radius': '20px'}" *ngFor="let c of categories;">{{c.title}}</ion-button>

现在，每次用户单击按钮或屏幕上任何位置的颜色都会自动更改，这很烦人。 另外，我在控制台中也收到此错误。

 getRandomColor(){
    let color = "#";
    for (let i = 0; i < 3; i++)
    {
        let part = Math.round(Math.random() * 255).toString(16);
        color += (part.length > 1) ? part : "0" + part;
    }
   return color;    
  }

编辑： 类别来自服务器以供选择。

ProfilePage.html:44 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'background: #de5d88'. Current value: 'background: #2ce111'.
    at viewDebugError (core.js:20440)
    at expressionChangedAfterItHasBeenCheckedError (core.js:20428)
    at checkBindingNoChanges (core.js:20530)
    at checkNoChangesnodeInline (core.js:23401)
    at checkNoChangesnode (core.js:23390)
    at debugCheckNoChangesnode (core.js:23994)
    at debugCheckDirectivesFn (core.js:23922)
    at Object.eval [as updateDirectives] (ProfilePage.html:44)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
    at checkNoChangesView (core.js:23289