連接到ASP.NETWebAPI的Angular專案不在瀏覽器中顯示資料

我正在嘗試從 ASP.NET 4.7 Web API 獲取一些資料，首先是資料庫，使用 Entity Framework 5 并嘗試將資料用于 Angular v13.3.11 專案，并在瀏覽器中顯示該資料。

我是初學者程式員，我提前感謝您的幫助。

這兩個專案都是本地的，用于學習目的。

Motorcycle班級：

namespace TestUsersCopyApi3.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class Motorcycle
    {
        public Motorcycle()
        {
            this.Carts = new HashSet<Cart>();
            this.OrderDetails = new HashSet<OrderDetail>();
            this.Dealers = new HashSet<Dealer>();
        }
    
        public int MotorcycleId { get; set; }
        public string Model { get; set; }
        public double Price { get; set; }
        public Nullable<int> BrandId { get; set; }
        public byte[] Image { get; set; }
        public Nullable<int> CategoryId { get; set; }
    
        public virtual Brand Brand { get; set; }
        public virtual ICollection<Cart> Carts { get; set; }
        public virtual Category Category { get; set; }
        public virtual ICollection<OrderDetail> OrderDetails { get; set; }
        public virtual ICollection<Dealer> Dealers { get; set; }
    }
}

Brand班級：

namespace TestUsersCopyApi3.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class Brand
    {
        public Brand()
        {
            this.Motorcycles = new HashSet<Motorcycle>();
            this.Categories = new HashSet<Category>();
            this.Dealers = new HashSet<Dealer>();
        }
    
        public int BrandId { get; set; }
        public string Name { get; set; }
        public byte[] Image { get; set; }
    
        public virtual ICollection<Motorcycle> Motorcycles { get; set; }
        public virtual ICollection<Category> Categories { get; set; }
        public virtual ICollection<Dealer> Dealers { get; set; }
    }
}

MotorTestDTO班級：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestUsersCopyApi3.Models
{
    public class MotorTestDTO
    {
        public string Model { get; set; }
        public double Price { get; set; }
        public byte[] Image { get; set; }
        public string BrandForMotor { get; set; }
    }
}

MotorTestController：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Http;
using TestUsersCopyApi3.Models;
using System.Web.Http.Cors;

namespace TestUsersCopyApi3.Controllers
{
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class MotorTestController : ApiController
    {
        private NavEcommerceDBfirstEntities db = new NavEcommerceDBfirstEntities();

        // GET: MotorTest
        public IQueryable<MotorTestDTO> Get()
        {
            var allMotorcycles = db.Motorcycles
                .Select(m => new MotorTestDTO
                {
                    Model = m.Model,
                    Price = m.Price,
                    Image = m.Image,
                    BrandForMotor = m.Brand.Name
                });
            return allMotorcycles;
        }
    }
}

在角度方面：

motor-test.model：

import { Byte } from "@angular/compiler/src/util";

export interface MotorTest{
    model: string;
    price: string;
    image: Byte[];
    brandForMotor: string;
    }

motortest.service.ts：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { MotorTest } from '../Model/motor-test.model';

@Injectable({
  providedIn: 'root'
})
export class MotortestService {

baseUrl = 'https://localhost:*****/api/MotorTest';
constructor(private http: HttpClient) { }

getAllMotorsTest(): Observable<MotorTest[]>{
return this.http.get<MotorTest[]>(this.baseUrl);
}
}

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { MotortestService } from './Service/motortest.service';
import { MotorTest } from './Model/motor-test.model';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'AngularUI';
allModelsForMotorTest: MotorTest[] = [];

  constructor(private motortestService: MotortestService) {}

ngOnInit(): void{
  this.allMotorsTest();
}

allMotorsTest(){
  this.motortestService.getAllMotorsTest().subscribe(
    response => {
      this.allModelsForMotorTest = response;
      console.log(response);
    }
  )
}
}

app.component.html：

<h4>
    {{title}}</h4>

<div *ngFor="let item of allModelsForMotorTest">
    <span>{{item.model}}</span>
    <span>{{item.price}}</span>
    <span>{{item.image}}</span>
    <span>{{item.brandForMotor}}</span>
</div>

問題

為什么輸出是瀏覽器中的空白頁面，但我可以將資料記錄到控制臺？

但是，我的主要問題是關于BrandForMotorAPI 和brandForMotorAngular 專案端中指向同一事物的變數，當我洗掉這些變數時，我可以毫無問題地將輸出都發送到瀏覽器和 DevTools 控制臺窗格，但很快當我考慮BrandForMotor在輸出瀏覽器中添加任何內容時？

我通過allMotorcycles變數進行的查詢MotorTestControllerok 嗎？

以下是運行 API 并為 Angular 專案提供服務后的一些螢屏截圖：

昂首闊步：

先感謝您。

uj5u.com熱心網友回復：

如果您仔細查看回傳的回應，這些屬性在 PascalCase 中，它認為專案值將無法系結到 Typescript 介面/類。

可以使用兩種方法：

方法一：

通過將屬性更改為 PascalCase 來修改 Typescript 介面屬性以匹配回傳的回應。

export interface MotorTest {
  Model: string;
  Price: string;
  Image: Byte[];
  BrandForMotor: string;
}

<div *ngFor="let item of allModelsForMotorTest">
    <span>{{item.Model}}</span>
    <span>{{item.Price}}</span>
    <span>{{item.Image}}</span>
    <span>{{item.BrandForMotor}}</span>
</div>

方法二：

將 WebApi 配置為以 camelCase 形式回傳回應。

參考：Web API 2：如何在物件及其子物件上回傳帶有駝峰式屬性名稱的 JSON

標籤：C＃ 。网 有角度的 asp.net-web-api

上一篇：如何將物件字串拆分為物件陣列？

下一篇：如何使用IncludeXmlComments指向同一解決方案中的第二個專案