無法在 LWC 中制作表格

Question

我想做一個這樣的表：

我從 js 的頂點獲取了值，它看起來像這樣：

    @track data2 = [];
    @track data = [];
    testClick() {
        
        getExchangeRates({baseCurrency : this.defaultCurrency, dateFrom : this.dateFrom, dateTo : this.dateTo, value : this.defaultValue})
            .then(resultJSON => {
                let result = JSON.parse(resultJSON);
                
                console.log(result);
                console.log('////////');
                console.log(result.rates);

                let recordsByDates = result.rates;
                for (var key in recordsByDates) {
                    console.log(key);
                    let record = {
                        date : key,
                        USD : recordsByDates[key].USD,
                        CAD : recordsByDates[key].CAD,
                        EUR : recordsByDates[key].EUR,
                        GBP : recordsByDates[key].GBP
                    }
                    this.data.push(record);
                    this.data2 = JSON.stringify(this.data);
                }

                console.log(this.data);
                console.log(this.data2);

            })
            .catch(error => {
                this.error = error;
                console.log(error);
            });        
    }

我試圖制作一張桌子，但有些東西對我來說沒有用：

      <template for:each={data2} for:item="dat">
            <tr key={dat} onclick={testClick}>
                <td data-label="data2">
                    {dat.key}
                </td>
                <td data-label="data2">
                    {dat.value}
                </td>
            </tr>
        </template> 

請告訴我如何解決這個問題

Answer 1

代碼中有幾個問題：

1. 沒有正確引用日期值
2. 應該添加一個唯一的鍵，需要在 for:each

這是更新的代碼

for (var key in recordsByDates) {
    let record = {
        key: key,  // index of object can be used 
        date : recordsByDates[key].date,
        USD : recordsByDates[key].USD,
        CAD : recordsByDates[key].CAD,
        EUR : recordsByDates[key].EUR,
        GBP : recordsByDates[key].GBP
    }
}

3. 在 HTML 中，您指的是錯誤的變量，它應該是 data，而不是 data2（已字符串化）。
4. 這種類型的結構不需要基於表格的標簽，您可以使用 div 來更好地控制。

在 HTML 文件中，它應該是這樣的：

       <template for:each={data} for:item="dat">
            <div key={dat.key} onclick={testClick}>
                <div class="date-wrap">
                    Date: {dat.date}
                </div>
                <div class="value-wrap">
                    USD: {dat.USD}
                </div>
                <div class="value-wrap">
                    CAD: {dat.CAD}
                </div>
                <div class="value-wrap">
                    EUR: {dat.EUR}
                </div>
                <div class="value-wrap">
                    GBP: {dat.GBP}
                </div>
            </div>
        </template> 

此外，您可以在數據變量中創建一個嵌套的對象數組，這有助於使結構更加通用。