Question

我有以下JSON对象：

[{
        "id": 31,
        "name": "Foosie",
        "terms": [{
                "term": 24,
                "monthly": 190.09
            },
            {
                "term": 27,
                "monthly": 179.6
            },
            {
                "term": 30,
                "monthly": 178.78
            },
            {
                "term": 33,
                "monthly": 178.06
            },
            {
                "term": 36,
                "monthly": 171.11
            },
            {
                "term": 39,
                "monthly": 215.36
            }
        ]
    },
    {
        "id": 35,
        "name": "Barrie",
        "terms": [{
                "term": 24,
                "monthly": 199.61
            },
            {
                "term": 27,
                "monthly": 188.05
            },
            {
                "term": 30,
                "monthly": 186.37
            },
            {
                "term": 33,
                "monthly": 184.95
            },
            {
                "term": 36,
                "monthly": 177.41
            },
            {
                "term": 39,
                "monthly": 220.85
            }
        ]
    },
    {
        "id": 23,
        "name": "Boosie",
        "terms": [{
                "term": 24,
                "monthly": 290.04
            },
            {
                "term": 27,
                "monthly": 287.01
            },
            {
                "term": 36,
                "monthly": 257.07
            },
            {
                "term": 39,
                "monthly": 245.85
            },
            {
                "term": 42,
                "monthly": 241.45
            }
        ]
    }
]

我正在尝试创建一个包含垂直和水平表的表。 (Vertical = names [Boosie, Foosie, Barrie], Horizontal = terms [24,27,...]

每月是一个按钮<button (click)="selectPayment(id, term)"></button>，它会传递所选单元格的ID和术语。

jsfiddle for demo：https://jsfiddle.net/34k8ytrk/ [注意：这是使用<table></table>完成的，用于快速演示，您的回复不必是一个表格

我知道我需要跟踪名称和术语，因为每月都取决于他们，但是我陷入了困境，我很难搞清楚。我知道我可能需要对数据进行一些操作才能使其工作。任何帮助将不胜感激。

Answer 1

table.component.html

<table>
    <thead>
    <tr>
        <td>(blank)</td>
        <!-- assuming all terms are the same, just take the first of the object -->
        <td *ngFor="let head of uniqueHeaders">{{head}}</td>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let bank of banks; let i = index">
        <td>{{bank.name}}</td>
        <td *ngFor="let head of uniqueHeaders">{{getColumnData(head, i)}}</td>
    </tr>
    </tbody>
</table>

table.component.ts

class BankDatabase {

    banks: BankData[] // your bank data

    get uniqueHeaders(): number[] {

      // We want a unique array of numbers for the header
      let _uniqueHeader = []


      this.banks.forEach((bank) => {
          bank.terms.forEach((term) => {
          // Append the term if it has not been added yet
          if (!_uniqueHeader.includes(term.term))
            _uniqueHeader.push(term.term)
        })
      })

      // This should return a unique array of all terms combined
      return _uniqueHeader
    }

    // head is the currently iterated column
    // i is the index of the bank (in your example 0 - 2)
    getColumnData(head, i): string {

      const matchingData = this.banks[i].terms.find(_term => _term.term === head)
      // If matching data found, return it's monthly value, else return empty string
      return matchingData && matchingData.monthly || ''
    }
}

这是你想要的吗？ banks是您拥有的json数据。

注意我正在使用getter函数来展平header数组，这很麻烦，您应该通过将展平数据保存到属性中进行优化，并在需要时从那里获取它。您可能还需要采取额外的步骤来对数组进行排序，就像在我的示例中一样，数组恰好从给定的示例数据中排序。

Plunker

使用angular-directives从JSON数据创建动态表

1 个答案: