请教各位高手，本人拟设计定义数组，根据数组内容渲染生成view控件，点击相应的view控件让它变换底色，同时或触发其他动作。之前是选择控件写死，但现在要随时直接变动数组内容，WXML页面则要同时灵活根据数组变动进行渲染。之前把控件内容和形式以及点击函数写死没有问题，均已实现。切换数组渲染生成控件后，出现了三个问题，1.点击颜色不变化，可能是wxml写的代码有误，但本人不知错在哪里，尝试了其他写法一直没有解决。2.数组渲染下，我想到了FOR循环去迎合其数组变动的不可测性，去判断点击了那个控件，来出发其底色变换，但不成功，如打印outcolor2没有赋颜色值。3. 因要在wxml的页面渲染，需要在JS data中定义变量并在JS中赋值后方可渲染，对吧？但数组未来是可能需要扩大的，且不可测，定义变量却要写死？比如数组长度未来可能20，总不能提前把变量定义的无限大吧？这个问题是，针对需要后期渲染的变量因数组的长度而变动，如何在前期定义呢？ 有点环环相扣的意思，但我觉得应该可以实现。请高手指点，感谢！部分代码如下：

wxml: （我感觉是style="background-color:outcolor{{index+1}}"写的不对，错在哪里？）

<view class="layer2box" wx:if="{{isShowOut}}" bindtap="onClickL2Out" >

  <view class="layer2style" style="background-color:outcolor{{index+1}}" wx:for="{{outarray}}" wx:key="*this">

    <view id="out{{index+1}}">{{index+1}}_{{item}}view>

    <icon id="outicon{{index+1}}" type="success" size="20rpx" color="{{iconcolor}}">icon>

  view>

view>

JS:

const bacgrocolor = "#AFEEEE"

DATA中定义 ：outarray: ["外形", "尺寸", "重量", "标签", "唛头", "其他"],

outcolor1: "",

     outcolor2: "",

    outcolor3: "",

    outcolor4: "",

    outcolor5: "",

    outcolor6: "",

（上面outcolori的值可能数组长度大于7就不够用了，怎么破？为了在WXML中渲染）

点击变换底色的函数：（写点switch的佐证一下之前的描述，是成功的），目前  console.log("i",i) 不执行，不知为何？

 onClickL2Out(res) {

    console.log("layer2", res)

    for (var i = 1; i <= this.data.outarray.length; i++) {

      if (res.target.id == "out" + i) {

        console.log("i", i)

        console.log("outcolor" + i)

        this.setData({

          outcolori: bacgrocolor

        })

      } else {

        this.setData({

          outcolori: ""

        })

      }

      console.log("outcolori",this.data.outcolor2)

点击2_尺寸view 控件，console打印台，说明已执行，但没有打印出outcolor2的值，应该是颜色值？