Question

我有一个表，并且我想基于一个属性为行着色，如下所示：如果account相同，则用灰色为其着色，否则，请使用蓝色为其着色。这是我的代码：

func() {
    for (let i = 0; i < this.List.length; i++) {
      if (this.List[i].account == this.List[i + 1].account) {
        this.List[i].color = "#f2f3f4"
      } else {
        if (this.List[i].account != this.List[i + 1].account && this.List[i].color != "#f2f3f4") {
          this.List[i].color = "rgba(173, 216, 230, 0.35)"
        }
      }
    }
  }

，但无法正常工作。如何修改代码？ Here is a working blitzstack

我也收到此错误：（我猜是来自List[i + 1]）

错误错误：无法读取未定义的属性“帐户”

Answer 1

基本索引错误。

您正在遍历整个数组（从0到this.List.length），然后尝试访问this.List[i + 1]。

从0到this.List.length - 1的循环

for (let i = 0; i < this.List.length - 1; i++) {

Answer 2

在您的代码中尝试

func() {

    const d  = this.List.map(e => e.account);

    this.List.forEach(user => {
       const length = this.List.filter(s => s.account === user.account).length;
       user.color = length >= 2 ? "#f2f3f4" : "rgba(173, 216, 230, 0.35)";
    })
}

Answer 3

此答案仅在以下条件下有效：

具有相同帐户的上一行或下一行的所有行都必须涂成灰色。否则，它们会被染成蓝色
单行显示为蓝色（不能与其他行具有相同的帐户）
多次出现但未连续出现的帐户被涂成蓝色
假定行未排序（因此再次对行进行排序将使行的颜色发生变化）

另外，很高兴知道在JavaScript forEach中应该遵循数组顺序。

forEach（）对数组中的每个元素以升序调用一次提供的回调函数。对于已删除或未初始化（即在稀疏数组上）的索引属性，不会调用它。

想法是：

遍历所有元素，但顺序无关紧要！
如果上一行或下一行具有相同的帐户，请应用上面的规则

  func() {
    // Empty list
    if(this.List.length === 0){
      return
    }
    // A single entry cannot have "same account"
    if(this.List.length === 1){
      this.List[0].color = "rgba(173, 216, 230, 0.35)"
      return
    }

    this.List.forEach((entry, i) => {
      // beware of edge case (first and last rows)
      const sameAccountPrev = i > 0 
          ? entry.account === this.List[i-1].account 
          : false
      const sameAccountNext = i < this.List.length -1
          ? entry.account === this.List[i+1].account
          : false
      entry.color = sameAccountPrev || sameAccountNext
          ? "#f2f3f4"
          : "rgba(173, 216, 230, 0.35)"
    });
  }

Answer 4

解决此问题的另一种好方法是将用户名散列为一种颜色。这样，具有相同用户的每两行将具有相同的颜色。

当然，您对使用哪种颜色的控制会更少。

基于对象字段值Angular 6的颜色td

4 个答案: