Question

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

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

Answer 1

请创建一个包含数据和颜色的模型，然后在适配器中进行设置，以您的情况为例，当您滚动它时，将调用onBindViewHolder并再次生成新颜色。因此请在适配器中的类中使用randomcolor（）方法。

Answer 2

这是因为更改检测是在用户交互时触发的，因此每次都调用getRandomColor。您应该设置一次背景颜色。

// Some place where categories are defined
this.categories = this.categories.map(category=> ({...category, bgColor: this.getRandomColor()}));

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

单击或滚动时，背景颜色会不断更新

2 个答案: