Question

是否可以显示我在Angular 7应用程序的WebAPI项目内部生成的视图？

我已经在控制器中编写了c＃代码，但是api甚至都没有显示在sagger中。

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

直接在WebAPI中显示它的代码就像

 public ActionResult Index()
        {
            DBModel sd = new DBModel();

            return View(sd.Fun_SL());
        }

在home.controller和

@model IEnumerable<WebAPI.Models.Apt>
<table>
    <tr>
        <th>symbol</th>
        <th>isin</th>
    </tr>
    @foreach (var result in Model)
    {
    <tr>
        <td>@result.symbol</td>
        <td>@result.isin</td>

    </tr>
    }
</table>

在Index.cshtml

Answer 1

角度以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>

打字稿显示

export class AptListComponent implements OnInit {
  constructor(private service: AptService) { }

  ngOnInit() {
    this.service.refreshList();
  }

  populateForm(emp: Apt) {
    this.service.formData = Object.assign({}, emp);
  }

}

打字稿服务

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

Answer 2

服务器端：

var arr = [
    { key: 'foo', val: 'bar' },
    { key: 'hello', val: 'world' }
];

var result = arr.reduce((map, obj) => ({
    ...map,
    [obj.key] = obj.val
}), {});

console.log(result);
// { foo: 'bar', hello: 'world' }

客户端：Index.html

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

ClientSide：app.js

<html>
<body ng-app="shortLowApp" ng-controller="shortLowController">

    <table>
        <tr>
            <th>Symbol</th>
            <th>isin</th>
        </tr>
            <tr ng-repeat="data in symbols">
                <td>{{ data.symbol }}</td>
                <td>{{ data.isin }}</td>
            </tr>        
    </table>

    <script src="Scripts/lib/angular.js"></script>
    <script src="Scripts/app.js"></script>

</body>
</html>

如果您在生成所需的输出时遇到任何困难，请告诉我。上面的代码在我这边产生了以下输出。

在Agular 7应用程序中从存储过程显示WebAPI视图

2 个答案: