使用著名的 Visual Studio 2017 Angular 4 模板,我测试了侧导航栏按钮并可以获取内存中的数据。
然后我在项目中添加了一个新的 ASP.Net Core 2.0 API Controller ,该 Controller 使用 Entity Framework 连接到数据库,并让它以 200 HTTP GET
结果运行。
Controller 代码:
#region TodoController
namespace TodoAngularUI.Controllers
{
[Route("api/[controller]")]
public class TodoController : Controller
{
private readonly SchoolContext _context;
#endregion
public TodoController(SchoolContext DbContext)
{
_context = DbContext;
if (_context.Todo.Count() == 0)
{
_context.Todo.Add(new Todo { TaskName = "Item1" });
_context.SaveChanges();
}
}
#region snippet_GetAll
[HttpGet]
public IEnumerable<Todo> GetAll()
{
return _context.Todo.ToList();
}
[HttpGet("{id}", Name = "GetTodo")]
public IActionResult GetById(long id)
{
var item = _context.Todo.FirstOrDefault(t => t.Id == id);
if (item == null)
{
return NotFound();
}
return new ObjectResult(item);
}
#endregion
现在,我想使用 Angular 显示生成的 ASP.Net Core Controller 数据,因此我创建了一个名为“todo
”的 TypeScript 组件,如下所示:
import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'todo',
templateUrl: './todo.component.html'
})
export class TodoComponent {
public Todo: task[];
constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
http.get(baseUrl + '/api/todo').subscribe(result => {
this.Todo = result.json() as task[];
}, error => console.error(error));
}
}
interface task {
Id: number;
TaskName: string;
IsComplete: boolean;
}
并如下创建其 HTML 组件:
<h1>Todo tasks</h1>
<p>This component demonstrates fetching Todo tasks from the server.</p>
<p *ngIf="!todo"><em>Loading...</em></p>
<table class='table' *ngIf="Todo">
<thead>
<tr>
<th>Id</th>
<th>Task Name</th>
<th>Is complete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let Task of todo">
<td>{{ Task.Id }}</td>
<td>{{ Task.TaskName }}</td>
<td>{{ Task.Iscomplete }}</td>
</tr>
</tbody>
</table>
然后去在Nav侧边栏菜单中添加它的路由,这里是TypeScript代码:
import { Component } from '@angular/core';
@Component({
selector: 'nav-menu',
templateUrl: './navmenu.component.html',
styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
}
这是导航栏 HTML 代码:
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' [routerLink]="['/home']">TodoAngularUI</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/counter']">
<span class='glyphicon glyphicon-education'></span> Counter
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/fetch-data']">
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/api/todo']">
<span class='glyphicon glyphicon-apple'></span> Todo api
</a>
</li>
</ul>
</div>
</div>
还有我的app.component.ts
:
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
这里的问题是,当我点击菜单按钮获取数据时,没有任何反应,所有其他按钮都有效,但这个按钮无效,直接使用浏览器 URL 时仍然显示 200 结果。
没有错误消息,而且我在网上搜索与 Angular 中不可点击按钮相关的问题以及与将数据从 ASP.Net 传递到 Angular 相关的问题时也没有找到解决方案。
我做错了什么?
最佳答案
(答案来 self 上面的评论)
在使用微软的 Angular 4 模板之前,我遇到过类似的问题。
问题
Microsoft 提供了 BASE_URL
字符串作为其模板的一部分 - 它是通过提取 href
获得的来自 base
的属性在 index.cshtml
中标记(BASE_URL 字符串不是 Angular 框架的一部分)。
base
index.cshtml 中的标记应类似于 <base href="~/" />
这意味着在任何地方使用 BASE_URL
在你的 Angular 4 项目中已经有 BASE_URL 后缀为 /
性格。
因此查看此组件调用 http.get
使用该网址:
@Component({
selector: 'todo',
templateUrl: './todo.component.html'
})
export class TodoComponent {
public Todo: task[];
constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
http.get(baseUrl + '/api/todo').subscribe(result => {
this.Todo = result.json() as task[];
}, error => console.error(error));
}
}
请注意,您调用了 http.get(baseUrl + '/api/todo')
有一个 /
在 /api/todo
前- 所以参数传递到http.get
看起来像http://example.com//api/todo
由于额外的 /
来自 BASE_URL。
解决方案
尝试 http.get(baseUrl + 'api/todo')
相反(注意 /
前面没有 api/todo
)- BASE_URL
如果模板中的其他内容没有更改,字符串应该已经包含了它。
2018 年 3 月 22 日更新:使用 HTTP POST
根据下面的评论,这里有一个 POST 的快速示例函数,假设 baseUrl
和 http
都被注入(inject)到构造函数中:
import { Observable } from 'rxjs/rx';
import { Http, Headers, RequestOptions } from '@angular/http';
@Component({
selector: 'todo',
templateUrl: './todo.component.html'
})
export class TodoComponent {
constructor(private http: Http,
@Inject('BASE_URL') private baseUrl: string) {
}
post(todo: Todo) {
let fullUrl = this.baseUrl + 'api/todo';
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(fullUrl, JSON.stringify(todo), options)
.subscribe(result => {
console.log(result);
}, error => console.error(error));
}
}
在 ASP.NET WebAPI 端(隐式知道如何处理 HTTP POST 请求中的 Content-Type
的 application/json
):
public class TodoController : Controller
{
[HttpPost]
public IActionResult Post([FromBody] Todo todo)
{
return Ok();
}
}
关于c# - Angular 4 - 如何从 ASP.Net web api 获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46756083/