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)，并且它们不能仅仅由table [] List.concat [ [ thead [] [ th [][text "Product"] , th [][text "Amount"] ] ], List.map toTableRow myList, [ tr [] [ td [][text "Total"] , td [][text toString(model.total)] ] ] ]组合使用逗号。

您可以在List package中查看将列表放在一起的功能。例如，您可以执行类似

的操作

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dp"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/customdia_text"
    android:layout_marginTop="20dp"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_centerHorizontal="true"
    android:text="hello"
    />
<Button
    android:id="@+id/custdia_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Ok"
    android:layout_marginBottom="30dp"
    android:layout_marginTop="20dp"
    android:layout_below="@+id/customdia_text"
    android:layout_centerHorizontal="true"/>

</RelativeLayout>

Answer 2

IMO最干净的解决方案在于@Wintvelt的第一个suggestion：table [] ([ myHeader ] ++ List.map ...)。对于榆树的新用户来说，这似乎是最直观的。（顺便说一句，我是新用户。）

基本上，在这里，外卖实现是榆树编译器不将table [] [] ++ []分组为table [] ([] ++ [])（例如）。相反，榆树将其分组为(table [] []) ++ []。如果你考虑一下，这是有道理的。

因此，榆树对table [] [] ++ []的评价首先会产生类型为Html msg的东西（在榆木0.18中）。此后，当++功能尝试将Html msg与List合并时，List功能会无效。

（当然，如果您尝试以错误的方式将Html附加到某些table [] ++ [] []属性，通过编码elm-make 0.18 (elm Platform 0.18.0)，您将获得类似的内容错误信息。）

这是一个充实的解决方案，使用module Main exposing (main) import Html exposing (..) main : Program Never Model Msg main = Html.program { init = init , view = view , update = update , subscriptions = subscriptions } -- MODEL type alias Model = { messages : List String } init : ( Model, Cmd Msg ) init = ( Model [], Cmd.none ) -- UPDATE type Msg = None update : Msg -> Model -> ( Model, Cmd Msg ) update msg { messages } = case msg of None -> ( Model messages, Cmd.none ) -- SUBSCRIPTIONS subscriptions : Model -> Sub Msg subscriptions model = Sub.batch [] -- VIEW type alias MyListItem = { label : String , price : Float } total : Float total = 5.0 myList : List MyListItem myList = [ { label = "labelA", price = 2 } , { label = "labelB", price = 3 } ] toTableRow : MyListItem -> Html Msg toTableRow myListItem = tr [] [ td [] [ text myListItem.label ] , td [] [ text (toString myListItem.price) ] ] view : Model -> Html Msg view model = table [] ([ thead [] [ th [] [ text "Product" ] , th [] [ text "Amount" ] ] ] ++ List.map toTableRow myList ++ [ tr [] [ td [] [ text "Total" ] , td [] [ text (toString total) ] ] ] )测试：

SELECT sgb_id,
       MAX (sgb_term_code_eff) max_term,
       MAX (sgb_typ_code) 
            KEEP ( DENSE_RANK FIRST 
                   ORDER BY sgb_term_code_eff DESC ) sgb_typ_code
FROM   sgb
GROUP BY sgb_id
ORDER BY 1

ELM - 列表行

2 个答案: