ELM - 列出表格行

Question

在示例中，当将列表映射到 html 时，我总是看到类似

ul []
   List.map toHtmlFunction myList

但是如果列表只是子 html 元素的一部分怎么办

...
  table []
        [
        thead []
              [
              th [][text "Product"],
              th [][text "Amount"]
              ],
        List.map toTableRow myList,
        tr []
           [
           td [][text "Total"],
           td [][text toString(model.total)]
           ]

        ]


toTableRow: MyListItem -> Html Msg
toTableRow myListItem =
  tr []
     [
     td[][text myListItem.label],
     td[][text toString(myListItem.price)]
     ]

有了这个代码我得到

The 1st element has this type:

  VirtualDom.Node a

But the 2nd is:

  List (Html Msg)

Answer 1

问题是thead和 tr属于 Html a 类型, 而 List.map返回 List (Html a) , 并且不能仅使用逗号将它们组合起来。

您可以在 List package 中查看将列表放在一起的函数。 .例如你可以做类似的事情

table []
    List.concat [
        [ thead []
            [ th [][text "Product"]
            , th [][text "Amount"]
            ]
        ],
        List.map toTableRow myList,
        [ tr []
            [ td [][text "Total"]
            , td [][text toString(model.total)]
            ]
        ]
    ]