Question

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

所以我基本上在后端的定价表上工作。有3种不同的状态（复数？）。第一个是显示，第二个是编辑，第三个是隐藏＆＃39;还有一个+按钮来添加一个新按钮。

现在，对于每一列，我准备了三个场景，而不是用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和Edit { {1}}。

如果您想为他们提供特定的固定数值：

我不知道第1,2和3层是什么意思，所以为了显示目的，我给了它们含有名为Rewards的枚举的含义，其值为Basic，Classic和Pro。

然后你的代码看起来像这样：

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

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

Click Here for more info on enums

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

如果要访问字符串值，可以： 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; } } =＆gt; Tiers[Tiers.show] === 'Show'

更新：评论后，我更了解你想要什么。您可以使用Map（或Set），并执行以下操作：

您可以使用类似地图或集合的内容。

true

// 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);其中Status.Show可以是0或其他数值，具体取决于您如何声明它。如果未设置，则返回undefined：例如tierStatus.get(Tiers.First) => Status.Show。

请注意，地图和套装位于ES6上，因此如果您要定位ES5，则可能需要填充或填充。

还有其他方法，如自定义对象或嵌套数组（数组数组），但这可能会增加复杂性，而不是与一些更易读的额外变量进行良好的折衷。

angular2 - 使变量更加可变

1 个答案: