Asp.net mvc 数据来自服务器到客户端页面，但不显示在带有MVC的Angular项目中

我正在用MVC运行一个角度项目。我想在网格中显示数据，如下所示。现在的问题是，我正在控制台窗口中获取数据，如下图所示。该项目正是借助于此进行尝试的

但它并没有显示出来。原因可能是什么？.提前谢谢你的帮助。。

产品服务

product-list.component.html

---

这是因为您的服务器将属性作为PascalCase返回，并且您的接口属性是camelCase

更改接口属性以匹配作为PascalCase返回的JSON，或更改服务器以返回camelCase属性

e、 g

---

只需为测试重命名变量，如下所示：

<tr *ngFor ="let product of products">
    <td>{{product.ProductName}}</td>
    <td>{{product.IntroductionDate | date}}</td>
    <td>{{product.Url}}</td>
    <td>{{product.Price |currency:'USD':true }}</td>
</tr>

---

请在调用GetProducts的地方发布代码。是否可以在组件订阅回调中添加console.log的结果以及组件的模板？添加了@VivekDoshiSolved…对于简单的错误，非常抱歉。请确保更改接口名称。

ngOnInit()
{
    this.getProducts();
}
products: Product[] = [];
private getProducts()
{
    this.productService.getProducts().subscribe((products) => this.products = products, errors => this.handleErrors(errors));

}

    <div class="row"
      *ngIf="products && products.length">

    <div class="col-xs-12">
        <div class="table-responsive">
            <table class="table table-bordered ">
<thead>
    <tr>
            <td>Product Name</td>
        <td>Introduction Date</td>
        <td>Url</td>
        <td class="text-right">Price</td>
    </tr>
</thead>
                <tbody>
                    <tr 
                        *ngFor ="let product of products">
                        <td>{{product.productName}}</td>
                        <td>{{product.introductionDate | date}}</td>
                        <td>{{product.url}}</td>
                        <td>{{product.price |currency:'USD':true }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div> 

public void ConfigureServices(IServiceCollection services)  
  {
      services.AddMvc()
                  .AddJsonOptions(options =>
                  {
                      options.SerializerSettings.ContractResolver =
                          new CamelCasePropertyNamesContractResolver();
                  });
  }

<tr *ngFor ="let product of products">
    <td>{{product.ProductName}}</td>
    <td>{{product.IntroductionDate | date}}</td>
    <td>{{product.Url}}</td>
    <td>{{product.Price |currency:'USD':true }}</td>
</tr>