数据未在HTML上呈现，但显示在控制台日志中-Angular

Question

我可以从服务器端提取JSON数据并将其显示在控制台日志中，只是无法在HTML页面上呈现。语法错误吗？

我正在尝试从MongoDB中访问数据并通过Angular显示它们。我在网络上添加了一些其他选项，以便在表格中显示数据并进行过滤/排序/等。我敢肯定，这与我的*ngFor有关。我已经尝试了'let ticket of tickets.obj和其他一些方法，但是没有运气。

我的ts文件。

this.http.post(environment.apiBaseUrl + '/filter', JSON.stringify(filterOptions), httpOptions)

.subscribe( res => {
  this.tickets = res;
  this.tickets = Array.of(this.tickets);
  this.totalPages = Math.ceil(this.totalRowCount / this.rowCount);
  console.log('Fetched Tickets');
  console.log(this.tickets);
},
  err => {
    console.log('Error fetching tickets');
  }
);

HTML

      <tbody>
        <tr *ngIf="tickets.length == 0">
          <td colspan="4" align="center" valign="middle">
            No Records Found.
          </td>
        </tr>
        <tr *ngFor="let ticket of tickets; let i = index;">
          <td>{{i+1+offset}}</td>
          <td>{{ticket.resolution}}</td>
          <td>{{ticket.ticketId}}</td>
          <td>{{ticket.status}}</td>
        </tr>
      </tbody>

该表为空白。它应该具有在控制台日志上显示的数据。

Answer 1

要绑定的数组是结果数组元素中的obj属性。

这将起作用：

...
  subscribe( res => {
  this.tickets = res[0].obj;
...

Answer 2

那里有一些问题：  -响应是数组，第一个元素是您需要的 您应该使用this.tickets = res [0] .obj。 希望我的回答可以帮助您;）

Answer 3

在存储在obj数组变量中的JSON响应数组中，因此使其工作，只需替换下面的代码即可

this.http.post(environment.apiBaseUrl + '/filter', JSON.stringify(filterOptions), httpOptions)

.subscribe( res => {
  this.tickets = res.obj; //obj is array elements
   this.tickets = Array.of(this.tickets);
  this.totalPages = Math.ceil(this.totalRowCount / this.rowCount);
  console.log('Fetched Tickets');
  console.log(this.tickets);
},

  err => {
    console.log('Error fetching tickets');
  }
);

希望这会有所帮助！