javascript - angular2 - 使变量更具可变性

Question

所以我不确定这个问题是否愚蠢，但我觉得我当前的解决方案不是最好的。

所以我基本上是在后端制定定价表。有 3 种不同的状态(复数？)。第一个是显示，第二个是编辑，第三个是“隐藏”，还有一个 + 按钮可以添加新的。

现在，我为每一列准备了三个场景，然后用 ngIf 显示/隐藏它们。我现在开始研究实际功能。比如当我点击按钮时改变等等。

import { Component, ViewEncapsulation } from '@angular/core';


declare var jQuery: any;

@Component({
  selector: '[packages]',
  templateUrl: './packages.template.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./packages.style.scss']
})
export class PackagesComponent {

  tier1Status = '';
  tier2Status = '';
  tier3Status = '';
  currentTiers = 1;

  ngOnInit() {
    this.checkTiers();
  }
  checkTiers() {
    if (this.currentTiers === 1) {
      this.tier1Status = 'show';
      this.tier2Status = 'notSetUp';
      this.tier3Status = 'hide';
    }
    else if (this.currentTiers === 2) {
      this.tier1Status = 'show';
      this.tier2Status = 'show';
      this.tier3Status = 'notSetUp';
    }
    else if (this.currentTiers === 3) {
      this.tier1Status = 'show';
      this.tier2Status = 'show';
      this.tier3Status = 'show';
    }
  }
  addTier(tierNumber: number) {
    if (tierNumber === 1) {
      this.tier1Status = 'edit';
    } else if (tierNumber === 2) {
      this.tier2Status = 'edit';
    } else if (tierNumber === 3) {
      this.tier3Status = 'edit';
    }
  }

}

正如已经提到的，我不确定这是否是最好的解决方案。好像有点复杂。我想知道是否有东西可以制作变量变量。听起来很愚蠢，但基本上有一个像 tierStatus[x] 这样的变量，当我单击按钮时，我总是会传递所指的层。 抱歉，我对 angular2 和 typescript/javascript 总体来说还很陌生。 也许是这样的

clickEdit (tierNumber: number) {
        tierStatus[tierNumber] = 'edit';
      }

非常感谢。 干杯

Answer 1

使用枚举。枚举允许您定义一组命名数字常量:

export enum Tiers {
  Show,
  NotSetup,
  Hide,
  Edit
}

因此，Show 将保存 0 作为其值，NotSetup 1 和 Hide 2 和 编辑 3。

如果您想给它们特定的固定数值:

export enum Tiers {
  Show = 1,
  NotSetup = 2,
  Hide = 3,
  Edit = 4
}

我不知道第 1、2 和 3 层的含义，因此出于显示目的，我通过名为“奖励”的枚举赋予它们含义，其值为“基本”、“经典”和“专业”。

然后你的代码将如下所示:

  tier1Status = null; // null Or maybe create a Tiers.NotSet value.
  tier2Status = null;
  tier3Status = null;
  currentTiers = Rewards.Basic;

  ngOnInit() {
    this.checkTiers();
  }

  checkTiers() {
    switch (this.currentTiers) {
      case Rewards.Basic:
        this.tier1Status = Tiers.Show;
        this.tier2Status = Tiers.NotSetup;
        this.tier3Status = Tiers.Hide;
        break;
      case Rewards.Classic:
        this.tier1Status = Tiers.Show;
        this.tier2Status = Tiers.Show;
        this.tier3Status = Tiers.NotSetup;
        break;
      case Rewards.Pro:
        this.tier1Status = Tiers.Show;
        this.tier2Status = Tiers.Show;
        this.tier3Status = Tiers.Show;
        break;
  }

  addTier(tierNumber: Rewards) {
    switch (tierNumber) {
      case Rewards.Basic:
        this.tier1Status = Tiers.Edit;
        break;
      case Rewards.Classic:
        this.tier2Status = Tiers.Edit;
        break;
      case Rewards.Pro:
        this.tier3Status = Tiers.Edit;
        break;
    }
  }

当然，代码未经测试，我只是想向您展示枚举的一个很好的用例，您可以在其中赋予数字含义。

Click Here for more info on enums

您将知道什么最适合您的应用以及如何让枚举为您工作。

如果你想访问字符串值，你可以: Tiers[Tiers.show] === '显示' => true

更新: 评论后我更明白你想要什么。 您可以使用 Map (或 Set)，并执行如下操作:

您可以使用 map 或集合之类的东西。

// This would be the values of your Tiers enum
Tiers.First
Tiers.Second
Tiers.Third

// And a Status enum
Status.Show
Status.Edit
Status.NotSetup

// Then with a Map, you could do something like this:
const tierStatuses = new Map();
tierStatuses.set(Tiers.First, Status.Show);
tierStatus.set(Tiers.Second, Status.NotSetup);

tierStatus.get(Tiers.First) => Status.Show 其中 Status.Show 可以是 0 或其他数值，具体取决于您如何声明它。如果未设置，则返回未定义:例如tierStatus.get('something') => 未定义。

请记住， map 和集合基于 ES6，因此如果您的目标是 ES5，则可能需要一个 Polyfill 或库。

还有其他方法，例如自定义对象或嵌套数组(数组的数组)，但这可能会增加复杂性，与一些更具可读性的额外变量相比，这不是一个很好的权衡。