Material UI：如何将对象数组显示到材质 UI 表中

发布于 2025-01-11 16:13:08 字数 1641 浏览 1 评论 0原文

我有这个界面，通过这个界面我显示一组值，很明显，我有一个“推导”，推导是一个数组，其中一、二、三、或几个值，并且因为它从表中可以清楚地看出，大多数行都包含 I have a Deduction 值，但在 ID 号为 11 的第四行中，它包含两个 Deduction 值，并且在这一行中可以清楚地看出，界面的形状已发生变化并且变得不漂亮，我遇到的问题是如何在更好的字符串中显示推导矩阵（数字彼此后面用逗号且没有空格）而不会使行变坏

   {n.deductions.map((deduction) => (
                      <TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount}
                      </TableCell>
                    ))}

这是推导矩阵，我获取数量并显示它

 "deductions": [
            {
                "id": 11,
                "receiptId": 11,
                "type": "loan",
                "amount": 7500,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            },
            {
                "id": 12,
                "receiptId": 11,
                "type": "loan",
                "amount": 1000,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            }
        ]

原文

I have this interface and through this interface I display a set of values, and as it is clear, I have a “deduction” and the deduction is an array in which either one, two, three, or several values, and as it is clear from the table that most of the lines contain I have one Deduction value, but in the fourth line with the ID number eleven it contains two Deduction values, and as it is clear in this line that the interface’s shape has changed and become not beautiful, the question and the problem I have is how can I display the Deduction matrix in a better String (numbers behind each other with commas and without spaces) without the line becoming bad

   {n.deductions.map((deduction) => (
                      <TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount}
                      </TableCell>
                    ))}

This is the deduction matrix, I take the quantity and display it

 "deductions": [
            {
                "id": 11,
                "receiptId": 11,
                "type": "loan",
                "amount": 7500,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            },
            {
                "id": 12,
                "receiptId": 11,
                "type": "loan",
                "amount": 1000,
                "reason": "You have took a holiday...",
                "createdAt": "2022-03-04T12:21:10.145Z",
                "updatedAt": "2022-03-04T12:21:10.145Z",
                "deletedAt": null
            }
        ]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲欢浪云 2025-01-18 16:13:08

好吧，在这种情况下，您应该从对象数组中检索“金额”值。请尝试以下操作：

//in the template
{deduction.map(singleDeduction => singleDeduction.amount)}

前面的代码将返回“金额”值的数组。通常，当打印数组时，javascript 会自动将数组转换为逗号分隔的字符串。如果没有发生这种情况，只需在末尾添加 .join 即可，如下所示：

{deduction.map((singleDeduction) => singleDeduction.amount).join(', ')}

另外，如果您想在每次扣除中添加“£”符号，请执行以下操作：

{deduction.map((singleDeduction) => "£" + singleDeduction.amount).join(', ')}

Well, in this case, you should retrieve the 'amount' value from an array of Objects. Try the following:

//in the template
{deduction.map(singleDeduction => singleDeduction.amount)}

The previous code will return an array of 'amount' values. Ussually, when printing arrays, javascript automatically converts the array to a comma separated string. If this doesnt happen, just add .join at the end, like this:

{deduction.map((singleDeduction) => singleDeduction.amount).join(', ')}

Also, if you want to add the '£' symbol to every deduction, do this:

{deduction.map((singleDeduction) => "£" + singleDeduction.amount).join(', ')}

回复收藏 0 原文

花开柳相依 2025-01-18 16:13:08

要以这种形式呈现数组：表格单元格内的[7500, 1000]，请尝试以下操作：-

<TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount[0] + "," + deduction.amount[1] }
                      </TableCell>

To render the array in this form : [7500, 1000] inside the table cell try this:-

<TableCell
                        key={deduction.id}
                        className="p-4  md:p-16"
                        component="th"
                        scope="row"
                        align="center"
                      >
                        <span>£</span>
                        {deduction.amount[0] + "," + deduction.amount[1] }
                      </TableCell>

回复收藏 0 原文

~没有更多了~