无法让Json显示在Ag Grid中只是说正在加载
use*_*946 8 json go ag-grid angular
通过使用各种示例，我在网络上发现了一个简单的Web应用程序。但是，尽管AG Grid（我选择用来显示数据的网格可以与提供的数据源一起使用，但是它不能与我自己的数据源一起使用，该数据源是使用Go编写的Web服务创建的。
角度代码...
ngOnInit() {
this.rowData = this.http.get('https://api.myjson.com/bins/ly7d1');
}
这可以正确显示网格上的数据。但是当我将其重定向到我时，请使用以下内容生成数据...
ngOnInit() {
this.rowData = this.http.get('http://localhost:10000/all');
}
这个网格只是说正在加载...
如果我在浏览器中测试任何一个链接，我都会得到完全相同格式的完全相同数据...
[{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000}]
这是到Json的链接：
https://api.myjson.com/bins/ly7d1
我在同一台机器上同时运行我的angular应用程序和go应用程序，但是有不同的服务并使用不同的端口...
我可以包含Go代码，但是由于数据在浏览器中正确显示，因此我看不出它有多重要。
尝试仅包含相关的内容，但是如果我错过了某些内容，请告诉我，然后我可以上传。
HTML代码...
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
<button (click)="onBtExport()">Export to CSV</button>
<ag-grid-angular
#agGrid
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[rowData]="rowData | async"
[columnDefs]="columnDefs"
rowSelection="multiple"
>
</ag-grid-angular>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
预期产量...
转到Web服务代码...
package main
import (
"database/sql"
"encoding/json"
"fmt"
"log"
"net/http"
"github.com/gorilla/mux"
_ "github.com/go-sql-driver/mysql"
)
// Article - Our struct for all articles
type Article struct {
Make string `json:"make"`
Model string `json:"model"`
Price int32 `json:"price"`
}
type Articles []Article
func homePage(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "Welcome to the HomePage!")
fmt.Println("Endpoint Hit: homePage")
}
func returnAllArticles(w http.ResponseWriter, r *http.Request) {
articles := Articles{
Article{Make: "Toyota", Model: "Celica", Price: 35000},
Article{Make: "Ford", Model: "Mondeo", Price: 32000},
Article{Make: "Porsche", Model: "Boxter", Price: 72000},
Article{Make: "Toyota", Model: "Celica", Price: 35000},
Article{Make: "Ford", Model: "Mondeo", Price: 32000},
Article{Make: "Porsche", Model: "Boxter", Price: 72000},
Article{Make: "Toyota", Model: "Celica", Price: 35000},
Article{Make: "Ford", Model: "Mondeo", Price: 32000},
Article{Make: "Porsche", Model: "Boxter", Price: 72000},
Article{Make: "Toyota", Model: "Celica", Price: 35000},
Article{Make: "Ford", Model: "Mondeo", Price: 32000},
Article{Make: "Porsche", Model: "Boxter", Price: 72000},
}
fmt.Println("Endpoint Hit: returnAllArticles")
json.NewEncoder(w).Encode(articles)
}
type Tag struct {
JN string `json:"jobno"`
Title string `json:"title"`
}
func returnSingleArticle(w http.ResponseWriter, r *http.Request) {
vars := mux.Vars(r)
key := vars["id"]
fmt.Fprintf(w, "Key: "+key)
}
func handleRequests() {
myRouter := mux.NewRouter().StrictSlash(true)
myRouter.HandleFunc("/", homePage)
myRouter.HandleFunc("/all", returnAllArticles)
log.Fatal(http.ListenAndServe(":10000", myRouter))
}
func main() {
handleRequests()
}
更新我现在尝试了以下操作...完全重写了Macbook上的站点和服务，尝试使用服务器上的其他端口，客户端尝试在其他计算机上运行服务器，禁用了所有防火墙
这些都没有任何区别。
You can't get the data because your browser blocks cross-origin HTTP request from http://localhost:4200 to http://localhost:10000/all for security reasons. Your Go server has to be able to handle preflight OPTIONS requests and send the right CORS headers in the response.
Use gorilla/handlers OR rs/cors to enable CORS support.
import (
"net/http"
"github.com/gorilla/mux"
"github.com/gorilla/handlers"
"github.com/rs/cors"
)
func handleRequests() {
myRouter := mux.NewRouter().StrictSlash(true)
myRouter.HandleFunc("/", homePage)
myRouter.HandleFunc("/all", returnAllArticles)
// Use rs/cors
corsOptions := cors.New(cors.Options{
AllowedHeaders: []string{"X-Requested-With", "Content-Type"},
AllowedOrigins: []string{"*"}, // instead of '*' you can add the urls you want to allow e.g. 'http://localhost:4200'
AllowedMethods: []string{http.MethodGet, http.MethodPost, http.MethodPut, http.MethodPatch, http.MethodDelete, http.MethodOptions, http.MethodHead}
})
log.Fatal(http.ListenAndServe(":10000", corsOptions.Handler(myRouter))
// OR use gorilla/handlers
corsHeaders := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
corsOrigins := handlers.AllowedOrigins([]string{"*"})
corsMethods := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})
log.Fatal(http.ListenAndServe(":10000", handlers.CORS(corsHeaders, corsOrigins, corsMethods)(myRouter)))
}
func main() {
handleRequests()
}