Question

我试图找出当用户点击UI上的按钮时如何从JSON切换数据。我正在使用Angular 2。

标记看起来像这样：

<button type="button" (click)="changeOdds('odds')">odds</button>
<button type="button" (click)="changeOdds('fractionOdds')">fraction odds</button>
<button type="button" (click)="changeOdds('americanOdds')">american odds</button>


 <div *ngFor="let marketOption of market.marketOptions">
     <span>{{ marketOption.fractionOdds }}</span>
 </div>

JSON数据如下所示：

"marketOptions": [
    {
        "americanOdds": -599,
        "fractionOdds": "167/1000",
        "odds": 1.167
    }
]

所以当前显示了fractionOdds，但是如果用户点击了按钮“美国赔率”，那么然后＆＃39; americanOdds＆＃39;应该从JSON显示。我还需要将用户保存到cookie /本地存储以保存用户选择。但我不确定这是否是最佳方法。有谁知道我怎么能用角度2做这个，或者知道在线的任何例子？

修改

以下是JSON对象的链接，其中＆＃39; marketOptions＆＃39;位于

https://gist.github.com/fogofogo/f4b5ac9a765fc684e7e08b30221c6419

Answer 1

假设changeOdds看起来像：

changeOdds(typeOfOdds) {
    this.typeOfOdds = typeOfOdds;
}

您应该能够将<span>{{ marketOption.fractionOdds }}</span>更新为：

<span>{{ marketOption[typeOfOdds] }}</span>

Answer 2

我对Angular 2并不是很熟悉，但看看下面是否通过更新的数据完成了您的需求。 Plunker @ the bottom也会更新。 ~~但在我看来，你并不需要那个for循环。而只是保持跨度，因为您选择的任何按钮都将自动更新marketOption。~~

由于您的数据是~~单个对象~~单个数组中的多个对象，因此您还必须确保正确访问它。在这种情况下，您可以遍历数组并从每个对象中选择正确的密钥，将这些键/值对添加到新数组中：

marketOptions =  [
{
    "americanOdds": -599,
    "fractionOdds": "167/1000",
    "odds": 1.167
},
{
    "americanOdds": -800,
    "fractionOdds": "761/1000",
    "odds": 2.7
},
{
    "americanOdds": -123,
    "fractionOdds": "912/1000",
    "odds": .795
}]

selectedOdds = [];
storedOdds = JSON.parse(localStorage.getItem("myprefix_oddsType")) || {};
oddsType = '';

changeOdds = function(e) {
  this.oddsType = e;
  this.selectedOdds = [];
  this.marketOptions.forEach((object, index)=>{
    this.selectedOdds.push(this.marketOptions[index][e])
  })
  this.storedOdds = {
    type: e,
    data: this.selectedOdds
  }
  localStorage.setItem("myprefix_oddsType", JSON.stringify(this.storedOdds));
  this.storedOdds = JSON.parse(localStorage.getItem("myprefix_oddsType"));
}

HTML：

<button type="button" (click)="changeOdds('odds')">odds</button>
<button type="button" (click)="changeOdds('fractionOdds')">fraction odds</button>
<button type="button" (click)="changeOdds('americanOdds')">american odds</button>

<div>Here are your {{oddsType}}</div>
<div *ngFor="let odds of selectedOdds">
 <span>{{ odds }}</span>
</div>

至于变量的存储，我认为这更多地取决于您用于存储/调用变量的用例。你可以使用localStorage对象吗？请注意，使用新数据，您必须对要传递给localStorage的对象进行字符串化/解析。

实施例： https://plnkr.co/edit/wHQrwFXeeN4SGO139Edv?p=preview

点击时从JSON切换数据（Angular 2）

2 个答案: