c# - 网络核心 API : Assigning Array name and showing in Angular

Question

如何为 Api 分配数组名称？

示例:这有一个名为 posts 的数组名称: https://public-api.wordpress.com/rest/v1.1/sites/vocon-it.com/posts

"found":95,"posts":[{"ID":5551,"site_ID":97734730,"author":{"ID":5,"login":"oveits","email":false,"name":"oveits","first_name":"Oliver","last_name":"Veits","nice_name":"oveits","URL":"","avatar_URL":"https:\/\/secure.gravatar.com\/avatar\/1364548d67e195a45f4d31cd84a4c826?s=96&d=identicon&r=g","profile_URL":"http:\/\/en.gravatar.com\/1364548d67e195a45f4d31cd84a4c826"},"date":"2018-12-20T20:10:29+00:00","modified":"2018-12-20T20:10:29+00:00","title":"Kubernetes (5) Local Persistent Volumes &#8211; A Step-by-Step Tutorial","URL":"https:\/\/vocon-it.com\/2018\/12\/20\/kubernetes-local-persistent-volumes\/","short_URL":"https:\/\/wp.me\/p6C5gC-1rx","content":"<p>Kubernetes local volume

我的代码没有数组名称，因此无法正常工作。我正在尝试使用下面的资源模板将我的数组 api 发布到 Angular CLI。问题是我需要一个数组名称。

[{"sysTablesId":0,"name":"Product","createDate":"0001-01-01T00:00:00"},{"sysTablesId":0,"name":"book","createDate":"0001-01-01T00:00:00"},{"sysTablesId":0,"name":"customertransaction","createDate":"0001-01-01T00:00:00"},

前端 Angular API:

https://vocon-it.com/2017/06/24/consuming-a-restful-web-service-with-angular/

<h1>Table Data</h1>
<div *ngIf="undefined === restItems">Loading...</div>
<div *ngIf="undefined !== restItems">
  <ul>
    <li *ngFor="let post of restItems['sysTables']" [innerHTML]="post.name">
    </li>
  </ul>
</div>

  ngOnInit() {
    this.getRestItems();
  }
    // Read all REST Items
    getRestItems(): void {
      this.restItemsServiceGetRestItems()
        .subscribe(
          restItems => {
            this.restItems = restItems;
            console.log(this.restItems);
          }
        )
    }
      // Rest Items Service: Read all REST Items
  restItemsServiceGetRestItems() {
    return this.http
      .get<any[]>(this.restItemsUrl)
      .pipe(map(data => data));
  }
}

后端 API:

[Route("api/[controller]")]
[ApiController]
public class ValuesController : Controller
{
    private readonly ProductRepository productRepository;


    public ValuesController()
    {
        productRepository = new ProductRepository();
    }


    // GET api/values
    [HttpGet]
    public IEnumerable<SysTables> Get()
    {
        return productRepository.GetAll();
    }

存储库:

    public IEnumerable<SysTables> GetAll()
    {
        using (IDbConnection dbConnection = Connection)
        {
            dbConnection.Open();
            return dbConnection.Query<SysTables>("SELECT * FROM sys.tables");
        }
    }

    public class SysTables
    {

        public int SysTablesId { get; set; }
        public string Name { get; set; }
        public DateTime CreateDate { get; set; }
    }

API 在我的 VS 代码和 Postman 中成功运行。只需在 sql 中使用 Dapper 调用表列表。

在 Chrome 中，它在 html 网站中没有显示任何结果，只是一个空列表，但至少显示了它在 F12 控制台中读取 API

还没有使用这个，

<h1>Tables</h1>
<div *ngIf="undefined === restItems">Loading...</div>
<div *ngIf="undefined !== restItems">
  <ul>
    <li *ngFor="let post of list">
      {{post.name}}
    </li>
</ul>

<ul>
    <li *ngFor="let post of list" [innerHTML]="post.name">
    </li>
</ul>
</div>

Answer 1

如果我理解正确的话:

使用*ngFor:

<h1>Table Data</h1>
<div *ngIf="undefined === restItems">Loading...</div>
<div *ngIf="undefined !== restItems">
  <ul>
    <li *ngFor="let post of restItems" [innerHTML]="post.name">
    </li>
  </ul>
</div>

WORKING DEMO