在網頁開發過程中,有時會遇到一些問題,例如在使用選擇器時出現了一些顯示選項的問題。其中一個常見問題是循環資料未在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中文網其他相關文章!