使用角度指令從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
            }
        ]
    }
]

我試圖用垂直和水平表創建一個表。 (Vertical = names [Boosie, Foosie, Barrie], Horizontal = terms [24,27,...]

每月是一個按鈕<button (click)="selectPayment(id, term)"></button> ，它傳遞所選單元格的ID和期限。

演示的jsfiddle： 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函數來平整headers數組，這很草率，您應該通過將平整的數據保存到屬性中進行優化，並在需要時從那里獲取它。 您可能還需要采取額外的步驟對數組進行排序，因為在我的示例中，該數組恰巧是從給定的示例數據中進行排序的。

柱塞