使用 angular 指令从 JSON 数据创建动态表

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
            }
        ]
    }
]

我正在尝试创建一个 table 同时具有垂直和水平 table 的 table。 (Vertical = names [Boosie, Foosie, Barrie], Horizontal = terms [24,27,...]

Monthly 是一个按钮 <button (click)="selectPayment(id, term)"></button>，它传递所选单元格的 ID 和期限。

用于演示的 jsfiddle：https://jsfiddle.net/34k8ytrk/ [注意：为了快速演示目的，这是使用 <table></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 函数来展平 headers 数组，这很草率，您应该通过将展平的数据保存到a 属性代替，并在需要时从那里获取它。您可能还需要采取额外的步骤对数组进行排序，如我的示例所示，数组恰好是根据给定的示例数据排序的。

Plunker

使用 angular 指令从 JSON 数据创建动态表

Creating dynamic tables from JSON data with angular-directives

javascript

angular-directive

angular