如何将从 ASP.NET API 检索到的数据显示到 angular V13 中

Question

我正在尝试从 web api 获取所有摩托车内容并将它们显示到我的 angular 项目中。

• ASP.NET 框架 Web API 4.7
• Angular CLI：13.3.7
• Angular：13.3.11

Web API侧：

Controller：

    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class HomeController : ApiController
    {
        private NavEcommerceDBfirstEntities db = new NavEcommerceDBfirstEntities();

        public HomeModel Get()
        {

        var streetBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Street").Select(m => new MotorcycleDTO
            {
                ModelDto = m.Model,
                PriceDto = m.Price,
                BrandDto = m.Brand.Name,
                CategoryDto = m.Category.MotoCategory,
                DealersDto = m.Dealers.Select(d => d.Name).ToList()
            });

            var sportBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Sport").Select(m => new MotorcycleDTO
            {
                ModelDto = m.Model,
                PriceDto = m.Price,
                BrandDto = m.Brand.Name,
                CategoryDto = m.Category.MotoCategory,
                DealersDto = m.Dealers.Select(d => d.Name).ToList()
            });

            var adventureBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Adventure").Select(m => new MotorcycleDTO
            {
                ModelDto = m.Model,
                PriceDto = m.Price,
                BrandDto = m.Brand.Name,
                CategoryDto = m.Category.MotoCategory,
                DealersDto = m.Dealers.Select(d => d.Name).ToList()
            });

            var scooterBikesContents = db.Motorcycles.Where(m => m.Category.MotoCategory == "Scooter").Select(m => new MotorcycleDTO
            {

                ModelDto = m.Model,
                PriceDto = m.Price,
                BrandDto = m.Brand.Name,
                CategoryDto = m.Category.MotoCategory,
                DealersDto = m.Dealers.Select(d => d.Name).ToList()
            });

            var homeModel = new HomeModel
            {
                StreetBikesContents = streetBikesContents,
                SportBikesContents = sportBikesContents,
                AdventureBikesContents = adventureBikesContents,
                ScooterBikesContents = scooterBikesContents
            };

            return homeModel;
        }

    }
}

    }

楷模：

主页型号 class:

 public class HomeModel
    {
        public IEnumerable<MotorcycleDTO> StreetBikesContents { get; set; }
        public IEnumerable<MotorcycleDTO> SportBikesContents { get; set; }
        public IEnumerable<MotorcycleDTO> AdventureBikesContents { get; set; }
        public IEnumerable<MotorcycleDTO> ScooterBikesContents { get; set; }

    }

摩托车class：

//Database First Approach and Created by ADO.NET 
    public partial class Motorcycle
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        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; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Cart> Carts { get; set; }
        public virtual Category Category { get; set; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<OrderDetail> OrderDetails { get; set; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Dealer> Dealers { get; set; }
    }

DTO class：

    public class MotorcycleDTO
    {
        public string ModelDto { get; set; }
        public double PriceDto { get; set; }
        public string BrandDto { get; set; }
        public string CategoryDto { get; set; }
        public IEnumerable<string> DealersDto { get; set; }

    }

Angular 侧面：

Model：

家用分类自行车.model.ts：

export interface FromDTOContents{
    ModelDto: string;
    PriceDto: string;
    BrandDto: string;
    CategoryDto: string;
    DealersDto: string[];
}

export interface HomeModel{
sportBikesContents: FromDTOContents[];
streetBikesContents: FromDTOContents[];
adventureBikesContents: FromDTOContents[];
scooterBikesContents: FromDTOContents[];
}

服务：

家庭分类自行车.service.ts：

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

  Url = 'https://localhost:44377/api/Home';

  constructor(private http: HttpClient) { }

  get(): Observable<HomeModel> {
    return this.http.get<HomeModel>(this.Url);
  }
}

app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Home Page';

  constructor(private homeCategorisedBikesService: HomeCategorisedBikesService){}

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


getAllBikesContents(){
  this.homeCategorisedBikesService.get().subscribe(
    Response => {
      this.onHomeBikesContentsResponse(Response);
    }

  )
}

public sportBikesContentsvar: string[] = [];
public streetBikesContentsvar: string[] = [];
public adventureBikesContentsvar: string[] = [];
public scooterBikesContentsvar: string[] = [];

onHomeBikesContentsResponse(Response: HomeModel): void {
  Response.sportBikesContents.forEach((content: FromDTOContents) => {
  this.sportBikesContentsvar.push(`${content.BrandDto, content.CategoryDto, content.ModelDto, content.PriceDto, content.DealersDto}`);
  });
  
  Response.sportBikesContents.forEach((content: FromDTOContents) => {
  this.streetBikesContentsvar.push(`${content.BrandDto, content.CategoryDto, content.ModelDto, content.PriceDto, content.DealersDto}`);
  });

  Response.sportBikesContents.forEach((content: FromDTOContents) => {
  this.adventureBikesContentsvar.push(`${content.BrandDto, content.CategoryDto, content.ModelDto, content.PriceDto, content.DealersDto}`);
  });

  Response.sportBikesContents.forEach((content: FromDTOContents) => {
  this.scooterBikesContentsvar.push(`${content.BrandDto, content.CategoryDto, content.ModelDto, content.PriceDto, content.DealersDto}`);
  });
}


} 

app.component.html：

<div class="container">
    <h3 class="textCenter">Soprt Bikes</h3>
    <div class="column" *ngFor="let c of sportBikesContentsvar">
        <h3>{{c}}</h3>
    </div>

    <div class="devideElement">
    <h3 class="textCenter">Street Bikes</h3>
        <div class="column" *ngFor="let c of streetBikesContentsvar">
            <h3>{{c}}</h3>
        </div>
    </div>

    <div class="devideElement">
           <h3 class="textCenter">Adventure Bikes</h3>
        <div class="column" *ngFor="let c of adventureBikesContentsvar">
            <h3>{{c}}</h3>
        </div>
    </div>

    <div class="devideElement">
          <h3 class="textCenter">Scooter Bikes</h3>
        <div class="column" *ngFor="let c of scooterBikesContentsvar">
            <h3>{{c}}</h3>
        </div>
    </div>
</div>

问题：

I want to display the c.model, c.brand, c.category, c.price, c.dealers which is an array of dealers for each motorcycle individually.

如果代码或问题中有任何不清楚的地方，请告诉我。

先感谢您。

Answer 1

你声明你的sportBikesContentsvar和其他人的方式会给你带来问题。 最好定义您的 object 类型FromDTOContents[] 。

这样您就可以访问所有 object 属性。

我发布了一个示例，rest 将是相同的

public sportBikesContentsvar: FromDTOContents[] = [];

onHomeBikesContentsResponse(Response: HomeModel): void {
  this.sportBikesContentsvar = Response.sportBikesContents;
}

然后在 HTML

<div class="container">
    <h3 class="textCenter">Sport Bikes</h3>
    <div class="column" *ngFor="let c of sportBikesContentsvar">
        <h3>{{c.ModelDto}}</h3>
        <h3>{{c.PriceDto}}</h3>
        <h3>{{c.BrandDto}}</h3>
        <h3>{{c.CategoryDto}}</h3>
        <ng-container *ngFor="let dealers of c.DealersDto">
           <h3>{{dealers}}</h3>
        </ng-container>
    </div>
</div>