我对 html 代码中的 for each 循环有疑问答案

【问题标题】：I have a issue with a for each loop within the html code我对 html 代码中的 for each 循环有疑问
【发布时间】：2019-08-23 08:25:44
【问题描述】：

我在 html //view 中遇到了 foreach 循环的问题。我正在尝试根据输入的重量更改图标的颜色。现在，当我将其从 html 中的 foreach 中取出时，该代码可以完美运行，但它仅适用于输入的最后一个重量，并且当它在 foreach 循环中时，图标会为每一行打印，只是不会显示任何颜色。那么有谁知道我怎么能做到这一点，并感谢您的时间。

    /////controller
index(request, response) {
const memberlistId = request.params.id;
const loggedInUser = accounts.getCurrentUser(request);

const viewData = {
  title: 'Memberlist',
  memberlist: memberStore.getMemberlist(loggedInUser.id),
  bmi: memberStore.getBmi(loggedInUser.id),
  weightClass: memberStore.getWeightClass(loggedInUser.id),
  idealBodyWeight: memberStore.isIdealBodyWeight(loggedInUser.id),
  getTrend: memberStore.getTrend( loggedInUser.id),
  timeStamp: memberStore.timestamp(),


};

    //////model
    getTrend(id) {
      const memberassessment = this.getMemberlist(id);
      const assess = memberassessment.assessments;

          if (assess.length > 1) {
            for (let i = 0; i < assess.length; i++) {
              if (assess[assess.length - 2].weight > assess[assess.length - 1].weight) {
                 const result = "green";
                 return result;
               } else {

                const result = "red";
                return result;
        }
    }
}
},


       //  The view where i'm having the problem getting icon to change colour

    <tbody>
      {{#each memberlist.assessments}} 
      <tr>
       <td>{{timeStamp}}</td>
       <td>{{weight}}
       </td>
       <td> {{chest}}   
       </td>
       <td> {{thigh}}
       </td>
       <td> {{upperArm}}
       </td>
       <td> {{waist}}
       </td>
       <td> {{hips}}
       </td>
       <td>     

       </td>
       <td>
        <a href="/memberlist/{{../memberlist.id}}/deleteassessment/{{id}}" class="ui tiny red button">Delete
         <i class="icon trash"></i></a>
       </td>
       <td>
        <a class="ui {{getTrend}} tag label"></a> //problem here keeps repeating and wont change colour
       </td> 
      </tr>
   {{/each}}   
 </tbody>

预期的结果是图标将在 foreach 循环中为每个输入的权重改变颜色

【问题讨论】：

您能告诉我们您的实际 HTML 视图代码吗？它完全缺失，但有必要了解您想要实现的目标。
好吧，我以为它在
您根本不使用i。此外，为了使代码正常工作，i 应在 getTrend 函数的外部/之前声明，并在每次调用函数时递增。
你能给我举个例子吗？

标签： javascript html model-view-controller glitch-framework

【解决方案1】：

if (assess.length > 1) {`
        for (let i = 0; i < assess.length; i++) {
          if (assess[assess.length - 2].weight > assess[assess.length - 1].weight) {
             let result = "green";
             return result;
           } else {

            let result = "red";
            return result;
    }
}

}

【讨论】：

您不能重新分配 const 关键字。而不是 const 使用 let.

【解决方案2】：

我不完全理解您试图实现的目标，但您要求提供代码，所以在这里。我做了什么：在条件中使用i；每次调用时递增i。我包括了 Mohit 给出的答案，并使用了let 而不是const。

//////model
var i = 1;
function getTrend(id) {
  const memberassessment = this.getMemberlist(id);
  const assess = memberassessment.assessments;

  if (i>=2 && assess.length >= i) {
        if (assess[i - 2].weight > assess[i - 1].weight) {
            let result = "green";
            return result;
        } else {
            let result = "red";
            return result;
        }
 }
 ++i;
}

我想您可能想检查资产是升序还是降序。为此，代码如下：

//////model
function getTrend(id) {
  const memberassessment = this.getMemberlist(id);
  const assess = memberassessment.assessments;

  for(i=2; assess.length >= i; ++i) {
        if (assess[i - 2].weight > assess[i - 1].weight) {
            //green
        } else {
            let result = "red";
            return result;
        }
  }
  let result = "green";
  return result;
}

【讨论】：