我的資料庫表如下所示 - 示例資料：
表結構：
我現在正試圖讓所有行都顯示在 chrome devtools 的控制臺上。
.NET Web API 如下所示；它作業正常，我在郵遞員那里檢查過。這是物體框架 API 控制器：
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;
using System.Web.Http.Description;
using template;
namespace template.Controllers
{
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class templatesController : ApiController
{
private editorEntities db = new editorEntities();
// GET: api/templates
public IQueryable<template> Gettemplates()
{
return db.templates;
}
// GET: api/templates/5
[ResponseType(typeof(template))]
public IHttpActionResult Gettemplate(int id)
{
template template = db.templates.Find(id);
if (template == null)
{
return NotFound();
}
return Ok(template);
}
// PUT: api/templates/5
[ResponseType(typeof(void))]
public IHttpActionResult Puttemplate(int id, template template)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != template.tempID)
{
return BadRequest();
}
db.Entry(template).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!templateExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}
// POST: api/templates
[ResponseType(typeof(template))]
public IHttpActionResult Posttemplate(template template)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.templates.Add(template);
try
{
db.SaveChanges();
}
catch (DbUpdateException)
{
if (templateExists(template.tempID))
{
return Conflict();
}
else
{
throw;
}
}
return CreatedAtRoute("DefaultApi", new { id = template.tempID }, template);
}
// DELETE: api/templates/5
[ResponseType(typeof(template))]
public IHttpActionResult Deletetemplate(int id)
{
template template = db.templates.Find(id);
if (template == null)
{
return NotFound();
}
db.templates.Remove(template);
db.SaveChanges();
return Ok(template);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool templateExists(int id)
{
return db.templates.Count(e => e.tempID == id) > 0;
}
}
}
這是有效的 Web API 呼叫：
這是按下按鈕時getthem()呼叫該函式的 .html 。
<button (click)="getThem()"></button>
<!-- <mat-form-field appearance="fill">
<mat-label>Chose Template</mat-label>
<mat-select>
<mat-option *ngFor="let temp of Templates" [value]="temp.value">
{{temp.viewValue}}
</mat-option>
</mat-select>
</mat-form-field> -->
<div class="example-button-row">
<div class="example-flex-container">
<button>
<mat-icon>add</mat-icon>
</button>
<button class="save">Save Current Template</button>
</div>
</div>
這是 Angular 中包含這 4 個屬性的類模板的 .ts 檔案
export interface template {
templateID: number,
templateName: string,
content: string,
version: number,
}
這是保存 api 呼叫的服務：
export class TemplatesService {
constructor(
private http:HttpClient,
) { }
getTemplates(): Observable<template[]>{
return this.http.get<template[]>('https://localhost:44334/api/templates');
}
}
這是用于呈現資料的 Angular 組件的 .ts 檔案。現在我只想看到他們到達，所以他們只是在控制臺上顯示。
@Component({
selector: 'app-template',
templateUrl: './template.component.html',
styleUrls: ['./template.component.css']
})
export class TemplateComponent implements OnInit {
templates: template[]=[];
constructor(
private templateService: TemplatesService
){}
ngOnInit(): void {
}
getThem(): void {
this.templateService.getTemplates()
.subscribe(templates=>this.templates=templates);
console.log(this.templates);
}
}
這是未在 devtools 源選項卡和控制臺中顯示的資料的螢屏截圖
網路標簽
uj5u.com熱心網友回復：
好吧，可能還有其他問題，但馬上我就發現您的異步代碼有問題。這是您當前的代碼，并附有注釋，說明為什么它的行為不像您預期??的那樣：
// TODO: rename getThem. This is the most generic name to the
// point that it might as well be called x(). What about something
// like refreshTemplates()? Or getTemplates()?
getThem(): void {
// getTemplates() is asynchronous, which means it doesn't block
// further execution in this function...
this.templateService.getTemplates()
.subscribe(templates=>this.templates=templates);
// ... which means this will always be its' initial value because
// getTemplates hasn't completed yet. We need to wait for subscribe
// to emit a value.
console.log(this.templates);
}
所以，第一個建議是重構你的代碼，在你 console.log 你的屬性之前等待你的 observable 發出一個函式。您只需將 console.log 放在回呼函式中即可完成此操作
getThem(): void {
// Retrieve templates and do stuff with emitted value
this.templateService.getTemplates().subscribe(templates=> {
this.templates = templates;
// Since we are calling this from inside our callback function,
// this.templates will be whatever our getTemplates() function
// emitted after we subscribed to it.
console.log(this.templates)'
});
}
下一個問題是您的網路選項卡顯示待處理。那些曾經完成過嗎？那里可能還有其他事情發生。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/398767.html