在網頁上的選擇器中顯示選項時出現問題：循環 {{ range }} 的資料未在 Go 範本中傳遞-Golang-PHP中文網

首頁

後端開發

Golang

在網頁上的選擇器中顯示選項時出現問題：循環 {{ range }} 的資料未在 Go 範本中傳遞

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Feb 08, 2024 pm 09:20 PM

在网页上的选择器中显示选项时出现问题：循环 {{ range }} 的数据未在 Go 模板中传递

在網頁開發過程中，有時會遇到一些問題，例如在使用選擇器時出現了一些顯示選項的問題。其中一個常見問題是循環資料未在Go模板中傳遞。這個問題可能會導致選擇器無法正確顯示選項。為了解決這個問題，我們需要對Go模板中的資料傳遞進行檢查和調整。在本文中，php小編新一將向大家介紹如何解決這個問題，並提供一些實用的技巧和建議。讓我們一起來看看吧！

問題內容

問題在於，在使用選擇器選擇產品類型的網頁上，選擇器內的選項（值）不會顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="Список-продуктов">Список продуктов</h1>


<form id="addProductForm">
    <label for="productName">Product Name:</label>
    <input type="text" id="productName" name="productName" required>

    <label for="weight">Weight:</label>
    <input type="number" id="weight" name="weight" required>

    <label for="typeSelect">Product Type:</label>
    <select class="form-control" id="typeSelect" name="TypeID">
        {{ range .Rows}}
        <option value="{{.ProductType.IDType}}">{{ .ProductType.NameType }}</option>
        {{ end }}
    </select>

    <label for="unit">Unit:</label>
    <input type="text" id="unit" name="unit" required>

    <label for="description">Description:</label>
    <input type="text" id="description" name="description" required>

    <label for="pricePickup">Price Pickup:</label>
    <input type="number" id="pricePickup" name="pricePickup" required>

    <label for="priceDelivery">Price Delivery:</label>
    <input type="number" id="priceDelivery" name="priceDelivery" required>


    <button type="button" onclick="addProduct()">Add Product</button>
</form>


<table id="productTable">
    <tr>
        <th>ID продукта</th>
        <th>ID типа</th>
        <th>Название продукта</th>
        <th>Вес</th>
        <th>Единица измерения</th>
        <th>Описание</th>
        <th>Цена самовывоза</th>
        <th>Цена с доставкой</th>
    </tr>
    {{range .Rows}}
    <tr>
        <td>{{.ProductID}}</td>
        <td>{{.ProductType.NameType}}</td>
        <td>{{.ProductName}}</td>
        <td>{{.Weight}}</td>
        <td>{{.Unit}}</td>
        <td>{{.Description}}</td>
        <td>{{.PricePickup}}</td>
        <td>{{.PriceDelivery}}</td>
    </tr>
    {{end}}
</table>

<script>
    function addProduct() {
        // Получение данных из формы
        var form = document.getElementById("addProductForm");
        var formData = new FormData(form);

        // Отправка данных на сервер
        fetch("/add_product", {
            method: "POST",
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                // Обработка ответа от сервера
                console.log("Product created:", data);

                // Очистка формы или выполнение других действий при необходимости
                form.reset();
            })
            .catch(error => console.error("Error:", error));
    }


</script>

</body>
</html>

儘管這部分帶有表輸出的程式碼工作得很好

{{range .Rows}}
<tr>
    <td>{{.ProductID}}</td>
    <td>{{.ProductType.NameType}}</td>
    <td>{{.ProductName}}</td>
    <td>{{.Weight}}</td>
    <td>{{.Unit}}</td>
    <td>{{.Description}}</td>
    <td>{{.PricePickup}}</td>
    <td>{{.PriceDelivery}}</td>
</tr>
{{end}}

我想從代表這種結構的表中獲取資料本身

package product_types

type ProductTypes struct {
    IDType   string `json:"type_id"`
    NameType string `json:"type_name"`
}

目前程式碼的結果現在看起來像這樣

結果1

我嘗試將其更改為這樣

<label for="typeSelect">Product Type:</label>
<select class="form-control" id="typeSelect" name="TypeID">
    {{ range .Rows}}
    <option value="{{.ProductType.IDType}}">{{ .ProductType.NameType }}</option>
    {{ end }}
</select>

結果變得更好了，但最後還是出現了重複

result2

解決方法

我找到了問題的答案 - 我沒有在 app.go 中新增 ProductTypes 表的路徑

} else if req.URL.Path == "/products.html" {
        log.Printf("Обслуживание HTML-файла: %s\n", productsHTMLPath)

        dataRows, err := repoProduct.FindAllProduct(context.TODO()) // Используйте функцию для получения продуктов
        if err != nil {
            http.Error(res, fmt.Sprintf("Запрос не выполнен: %v", err), http.StatusInternalServerError)
            return
        }

        dataRows1, err := repo.FindAll(context.TODO()) // Используйте функцию для получения типов продуктов
        if err != nil {
            http.Error(res, fmt.Sprintf("Запрос не выполнен: %v", err), http.StatusInternalServerError)
            return
        }

        tmpl, err := template.ParseFiles(productsHTMLPath)
        if err != nil {
            http.Error(res, fmt.Sprintf("Не удалось парсирование шаблона: %v", err), http.StatusInternalServerError)
            return
        }

        Rows := struct {
            Products     []products2.Product
            ProductTypes []product_types2.ProductTypes
        }{
            Products:     dataRows,
            ProductTypes: dataRows1,
        }

        err = tmpl.Execute(res, Rows)
        if err != nil {
            http.Error(res, fmt.Sprintf("Не удалось выполнить шаблон: %v", err), http.StatusInternalServerError)
        }
    }

最初的程式碼如下所示：

} else if req.URL.Path == "/products.html" {
            log.Printf("Обуслуживание HTML-файла: %s\n", productsHTMLPath)

            dataRows, err := repoProduct.FindAllProduct(context.TODO()) // Используйте функцию для получения продуктов
            if err != nil {
                http.Error(res, fmt.Sprintf("Запрос не выполнен: %v", err), http.StatusInternalServerError)
                return
            }

            tmpl, err := template.ParseFiles(productsHTMLPath)
            if err != nil {
                http.Error(res, fmt.Sprintf("Не удалось парсирование шаблона: %v", err), http.StatusInternalServerError)
                return
            }

            err = tmpl.Execute(res, struct{ Rows []products2.Product }{dataRows})
            if err != nil {
                http.Error(res, fmt.Sprintf("Не удалось выполнить шаблон: %v", err), http.StatusInternalServerError)
            }
        }

產品.html：

<label for="typeSelect">Product Type:</label>
    <select class="form-control" id="typeSelect" name="TypeID">
        {{ range .ProductTypes}}
        <option value="{{.IDType}}">{{ .NameType }}</option>
        {{ end }}
</select>

以上是在網頁上的選擇器中顯示選項時出現問題：循環 {{ range }} 的資料未在 Go 範本中傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：stackoverflow。如有侵權，請聯絡admin@php.cn刪除

學習Go Byte Slice操縱：使用'字節”軟件包May 16, 2025 am 12:14 AM

1）usebybytes.2）

如何使用'編碼/二進制”軟件包在GO中編碼和解碼二進制數據（分步）May 16, 2025 am 12:14 AM

Tousethe"encoding/binary"packageinGoforencodinganddecodingbinarydata,followthesesteps:1)Importthepackageandcreateabuffer.2)Usebinary.Writetoencodedataintothebuffer,specifyingtheendianness.3)Usebinary.Readtodecodedatafromthebuffer,againspeci

您如何使用'編碼/二進制”軟件包在GO中編碼和解碼二進制數據？May 16, 2025 am 12:13 AM

encoding/binary包提供了統一的方式來處理二進制數據。 1)使用binary.Write和binary.Read函數可以編碼和解碼整數、浮點數等多種數據類型。 2)可以通過實現binary.ByteOrder接口來處理自定義類型。 3)需要注意字節序選擇、數據對齊和錯誤處理，以確保數據的正確性和高效性。

Go Strings軟件包：每個用例都完成嗎？May 16, 2025 am 12:09 AM

Go的strings包不適用於所有用例。它適用於大多數常見的字符串操作，但對於復雜的NLP任務、正則表達式匹配和特定格式解析，可能需要第三方庫。

GO字符串軟件包的限制是什麼？May 16, 2025 am 12:05 AM

Go語言中的strings包在處理大量字符串操作時存在性能和內存使用上的限制。 1)性能問題：如strings.Replace和strings.ReplaceAll在處理大規模字符串替換時效率較低。 2)內存使用：由於字符串不可變，每次操作會生成新對象，導致內存消耗增加。 3)Unicode處理：在處理複雜Unicode規則時不夠靈活，可能需要藉助其他包或庫。

GO中的字符串操縱：掌握'字符串”軟件包May 14, 2025 am 12:19 AM

掌握Go語言中的strings包可以提高文本處理能力和開發效率。 1)使用Contains函數檢查子字符串，2)用Index函數查找子字符串位置，3)Join函數高效拼接字符串切片，4)Replace函數替換子字符串。注意避免常見錯誤，如未檢查空字符串和大字符串操作性能問題。

去'字符串”包裝提示和技巧May 14, 2025 am 12:18 AM

你應該關心Go語言中的strings包，因為它能簡化字符串操作，使代碼更清晰高效。 1)使用strings.Join高效拼接字符串；2)用strings.Fields按空白符分割字符串；3)通過strings.Index和strings.LastIndex查找子串位置；4)用strings.ReplaceAll進行字符串替換；5)利用strings.Builder進行高效字符串拼接；6)始終驗證輸入以避免意外結果。

GO中的'字符串”軟件包：您的首選字符串操作May 14, 2025 am 12:17 AM

thestringspackageingoisesential forefficientstringManipulation.1）itoffersSimpleyetpoperfulfunctionsFortaskSlikeCheckingSslingSubstringsStringStringsStringsandStringsN.2）ithandhishiCodeDewell，withFunctionsLikestrings.fieldsfieldsfieldsfordsforeflikester.fieldsfordsforwhitespace-fieldsforwhitespace-separatedvalues.3）3）

See all articles