Net Core API: присвоение имени массива и отображение в 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"},

API-интерфейс углового интерфейса:

https://vocon -it.com / 2017/06 /24 / потребляющий-отдых-веб-сервис с угловым /

<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 и Почтальоне.Просто вызывает список таблиц с помощью Dapper в sql.

В Chrome он не показывает результатов на html-сайте, просто пустой список, но, по крайней мере, показывает его чтение API в консоли F12

Пока не работает с этим,

<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