文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将从ASP.NET API检索到的数据显示为角V13

问如何将从ASP.NET API检索到的数据显示为角V13
EN

Stack Overflow用户

提问于 2022-08-29 21:17:33

回答 1查看 71关注 0票数 0

我试图从web中获取每一个摩托车内容，并将它们显示在我的角度项目中。

13.3.7

Angular：

ASP.NET Framework 4.7

角CLI：

13.3.11

Web端：

控制器：

    [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;
        }

    }
}

    }

模型：

HomeModel类：

 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; }

    }

摩托车级：

//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类：

    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; }

    }

角侧：

模型：

家庭-分类-自行车。模型：

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

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

服务：

家庭-分类-自行车。服务：

@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>

问题：

我想展示c.model，c.brand，c.category，c.price，c.dealers，这是针对每辆摩托车的一系列经销商。

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

提前谢谢你。

angular

typescript

asp.net-web-api

回答 1

Stack Overflow用户

发布于 2022-08-29 22:52:50

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

这样，您就可以访问所有对象属性。

我只举一个例子，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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73534757

复制

相似问题

问如何将从ASP.NET API检索到的数据显示为角V13
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将从ASP.NET API检索到的数据显示为角V13EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将从ASP.NET API检索到的数据显示为角V13
EN