从Angular 7应用程序中的存储过程显示WebAPI视图

有没有办法显示我在Angular 7应用程序的WebAPI项目中生成的视图

我已经在我的控制器中编写了c#代码，但api甚至没有在swagger中显示

public IEnumerable ShortLow（）
{
List emplist=新列表（）；
使用（DBModel db=new DBModel（））
{
var results=db.Fun_SL（）.ToList（）；
foreach（结果中的var结果）
{
var apts=new Apt（）
{
AptID=result.AptID，
Eyreid=result.Eyreid，
symbol=结果。symbol，
isin=result.isin，
};
添加（apts）；
}
返回雇主；
}
}

直接在WebAPI中显示它的代码与

public ActionResult Index（）
{
DBModel sd=新的DBModel（）；
返回视图（sd.Fun_SL（））；
}

在home.controller和

@model IEnumerable
符号
伊辛
@foreach（模型中的var结果）
{
@结果.符号
@result.isin
}

---

在Index.cshtml服务器端：

 public LowController : ApiController
 {

    [HttpGet]
    public IActionResult<IEnumerable<Apt>> ShortLow()
    {
        List<Apt> emplist = new List<Apt>();
        using (DBModel db = new DBModel())
        {
            var results = db.Fun_SL().ToList();
            foreach (var result in results)
            {
                var apts = new Apt()
                {
                    AptID = result.AptID,
                    EyrieID= result.EyrieID,
                    symbol = result.symbol,
                    isin = result.isin,

                };
                emplist.Add(apts);
            }
            return emplist;
        }
    }

公共控制器：ApiController
{
[HttpGet]
公共IActionResult ShortLow（）
{
List emplist=新列表（）；
使用（DBModel db=new DBModel（））
{
var results=db.Fun_SL（）.ToList（）；
foreach（结果中的var结果）
{
var apts=new Apt（）
{
AptID=result.AptID，
Eyreid=result.Eyreid，
symbol=结果。symbol，
isin=result.isin，
};
添加（apts）；
}
返回雇主；
}
}

Clientside:Index.html

象征
伊辛
{{data.symbol}
{{data.isin}

角度 以html显示

<table>
      <tr>
          <th>symbol</th>
          <th>isin</th>
      </tr>

      <tr *ngFor="let emp of service.list">
          <td>{{emp.symbol}}</td>
          <td>{{emp.isin}}</td>
      </tr>

</table>

打字脚本服务

import { Injectable } from '@angular/core';
import { Apt } from './Apt.model';
import { HttpClient } from '@angular/common/http';

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

  formData: Apt;
  list: Apt[];
  readonly rootURL = 'http://localhost:50389/api';

  constructor(private http: HttpClient) { }

  refreshList() {
    this.http.get(this.rootURL + '/ShortLow')
      .toPromise().then(res => this.list = res as Apt[]);
  }

}

WebAPI 校正控制器：

     [HttpGet]
        public IEnumerable<Apt> ShortLow()
        {
            List<Apt> emplist = new List<Apt>();
            using (DBModel db = new DBModel())
            {
                var results = db.Fun_SL().ToList();
                foreach (var result in results)
                {
                    var apts = new Apt()
                    {
                        AptID = result.AptID,
                        EyrieID= result.EyrieID,
                        symbol = result.symbol,
                        isin = result.isin,

                    };
                    emplist.Add(apts);
                }
                return emplist;
            }
        }

[HttpGet]
公共IEnumerable ShortLow（）
{
List emplist=新列表（）；
使用（DBModel db=new DBModel（））
{
var results=db.Fun_SL（）.ToList（）；
foreach（结果中的var结果）
{
var apts=new Apt（）
{
AptID=result.AptID，
Eyreid=result.Eyreid，
symbol=结果。symbol，
isin=result.isin，
};
添加（apts）；
}
返回雇主；
}
}

通常情况下，angular应用程序不会这样启动。angular应用程序应表示angular模块。在该模块中注册客户端控制器。在索引页上显示控制器获取方法以提供数据。继续为您准备示例答案…您应通过angular CLI创建独立的angular项目并添加服务。ts和使用HttpClient调用您的API OP使用的是Angular 7，而不是AngularJS。然后，OP需要使用基于类型脚本和组件的策略，而不是AngularJS特定的代码。但我认为，他应该使用Microsoft SPA模板和Angular CLI应用程序。我只是提供了想法，而不是100%对应的实现对于Angular 7。但是OP必须通过考虑指令和组件方法对Angular 7做同样的事情。你好，Usman谢谢你的回答。我将尝试实现它

     [HttpGet]
        public IEnumerable<Apt> ShortLow()
        {
            List<Apt> emplist = new List<Apt>();
            using (DBModel db = new DBModel())
            {
                var results = db.Fun_SL().ToList();
                foreach (var result in results)
                {
                    var apts = new Apt()
                    {
                        AptID = result.AptID,
                        EyrieID= result.EyrieID,
                        symbol = result.symbol,
                        isin = result.isin,

                    };
                    emplist.Add(apts);
                }
                return emplist;
            }
        }