Heim > Artikel > Backend-Entwicklung > Problem beim Anzeigen von Optionen im Selektor auf der Webseite: Daten für die Schleife {{ range }} wurden nicht in der Go-Vorlage übergeben

Problem beim Anzeigen von Optionen im Selektor auf der Webseite: Daten für die Schleife {{ range }} wurden nicht in der Go-Vorlage übergeben

WBOYnach vorne: 2024-02-08 21:20:09364Durchsuche

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

Im Prozess der Webentwicklung treten manchmal Probleme auf, z. B. einige Anzeigeoptionen bei der Verwendung des Selektors. Eines der häufigsten Probleme besteht darin, dass Schleifendaten in Go-Vorlagen nicht übergeben werden. Dieses Problem kann dazu führen, dass der Selektor die Optionen nicht korrekt anzeigt. Um dieses Problem zu lösen, müssen wir die Datenübergabe in Go-Vorlagen überprüfen und anpassen. In diesem Artikel stellt der PHP-Editor Shinichi vor, wie dieses Problem gelöst werden kann, und gibt einige praktische Tipps und Vorschläge. Lass uns einen Blick darauf werfen!

Probleminhalt

Das Problem besteht darin, dass auf einer Webseite, die einen Selektor zur Auswahl eines Produkttyps verwendet, die Optionen (Werte) innerhalb des Selektors nicht angezeigt werden

<!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>

Obwohl dieser Teil des Codes mit der Tabellenausgabe einwandfrei funktioniert

{{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}}

Ich möchte die Daten selbst aus der Tabelle abrufen, die diese Struktur darstellt

package product_types

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

Das Ergebnis des aktuellen Codes sieht nun so aus

结果1

Ich habe versucht, es so zu ändern

<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>

Die Ergebnisse wurden besser, aber am Ende gab es Duplikate

result2

Workaround

Ich habe die Antwort auf mein Problem gefunden – ich habe den Pfad zur ProductTypes-Tabelle in app.go nicht hinzugefügt

} 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)
        }
    }

Der ursprüngliche Code sieht so aus:

} 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)
            }
        }

produkt.html:

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

Das obige ist der detaillierte Inhalt vonProblem beim Anzeigen von Optionen im Selektor auf der Webseite: Daten für die Schleife {{ range }} wurden nicht in der Go-Vorlage übergeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html 循环选择器

Stellungnahme：

Dieser Artikel ist reproduziert unter:stackoverflow.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Analysieren Sie die Date.toString()-Ausgabe von nodeJ in Zeit in goNächster Artikel：Analysieren Sie die Date.toString()-Ausgabe von nodeJ in Zeit in go

In Verbindung stehende Artikel

Mehr sehen