在網頁上的選擇器中顯示選項時出現問題：循環 {{ range }} 的資料未在 Go 範本中傳遞
- WBOY轉載
- 2024-02-08 21:20:09319瀏覽
在網頁開發過程中，有時會遇到一些問題，例如在使用選擇器時出現了一些顯示選項的問題。其中一個常見問題是循環資料未在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中文網其他相關文章！
陳述：
本文轉載於：stackoverflow.com。如有侵權，請聯絡admin@php.cn刪除