标签：c typescript angular asp-net-core-webapi
使用着名的Visual Studio 2017 Angular 4模板,我测试了侧导航按钮,可以获取内存中的数据.
然后我在项目中添加了一个新的ASP.Net Core 2.0 API控制器,它使用Entity Framework连接到数据库,并使其运行200 HTTP GET结果.
控制器代码：
#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控制器数据,因此我创建了一个名为“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 {
}
这是Navbar 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.
我究竟做错了什么？
解决方法:
(答案来自我上面的评论)
在使用Microsoft的Angular 4模板之前,我遇到过类似的问题.
问题
Microsoft提供BASE_URL字符串作为其模板的一部分 – 它是通过从index.cshtml中的基本标记中提取href属性获得的(BASE_URL字符串不是Angular框架的一部分).
index.cshtml中的基本标记应该类似于< base href =“〜/”/>
这意味着在Angular 4项目中使用BASE_URL的任何地方已经有BASE_URL后缀为/字符.
所以看看使用该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/由于来自BASE_URL的额外/来自todo.
解决方案
请尝试http.get(baseUrl’api / todo’)(注意api / todo前面没有/) – 如果模板中没有其他内容被更改,则BASE_URL字符串应该已包含该字符串.
更新22-03-2018：使用HTTP POST
根据下面的评论,这里是一个POST的快速示例函数,假设baseUrl和http都被注入到构造函数中：
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请求中处理application-type of application / json)：
public class TodoController : Controller
{
[HttpPost]
public IActionResult Post([FromBody] Todo todo)
{
return Ok();
}
}
标签：c,typescript,angular,asp-net-core-webapi 来源： https://codeday.me/bug/20190705/1390146.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。