在網頁上的選擇器中顯示選項時出現問題：循環 {{ 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>Список продуктов</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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

Golang vs. Python：性能和可伸縮性 Apr 19, 2025 am 12:18 AM

Golang在性能和可擴展性方面優於Python。 1)Golang的編譯型特性和高效並發模型使其在高並發場景下表現出色。 2)Python作為解釋型語言，執行速度較慢，但通過工具如Cython可優化性能。

Golang和C：並發與原始速度 Apr 21, 2025 am 12:16 AM

Golang在並發性上優於C ，而C 在原始速度上優於Golang。 1)Golang通過goroutine和channel實現高效並發，適合處理大量並發任務。 2)C 通過編譯器優化和標準庫，提供接近硬件的高性能，適合需要極致優化的應用。

Golang的影響：速度，效率和簡單性 Apr 14, 2025 am 12:11 AM

goimpactsdevelopmentpositationality throughspeed，效率和模擬性。 1）速度：gocompilesquicklyandrunseff，IdealforlargeProjects.2）效率：效率：ITScomprehenSevestAndardArdardArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdEcceSteral Depentencies，增強的Depleflovelmentimency.3）簡單性。

開始GO：初學者指南 Apr 26, 2025 am 12:21 AM

goisidealforbeginnersandsubableforforcloudnetworkservicesduetoitssimplicity，效率和concurrencyFeatures.1）installgromtheofficialwebsitealwebsiteandverifywith'.2）