ELM – 列表行

2019年7月21日 218次阅读

在示例中,当将列表映射到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)

最佳答案 问题是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)]
            ]
        ]
    ]
点赞