首页 > 解决方案 > 即使 API 正在工作,表格也没有显示行结果

问题描述

我正在使用 Angular 11.0.2 显示来自 Sql-server 的表。
Sql server 工作正常,API 显示结果。
但是当我试图在 Angular 中显示表格时,表格行没有显示。

在 name.component.html 中

<table class="table table-striped">
    <thead>
        <tr>
            <th>DepartmentId</th>
            <th>Department Name</th>
            <th>Options</th>
        </tr>
    </thead>

    <tbody>
        <tr *ngFor="let dataItem of DepartmentList">
            <td>{{dataItem.DepartmentId}}</td>
            <td>{{dataItem.DepartmentName}}</td>
            <td>
                <button type="button" class="btn btn-light mr-1">
                    Edit
                </button>
                <button type="button" class="btn btn-light mr-1">
                    Delete
                </button>
            </td>
        </tr>
    </tbody>
</table>

我假设它是因为ngFor
所以我在网上尝试了多个建议,但仍然无法正常工作。

import { Component, OnInit } from '@angular/core';
import {SharedService} from 'src/app/shared.service';

@Component({
  selector: 'app-show-dep',
  templateUrl: './show-dep.component.html',
  styleUrls: ['./show-dep.component.css']
})
export class ShowDepComponent implements OnInit {

  constructor(private service:SharedService) { }

  DepartmentList:any=[];


  ngOnInit(): void {
    this.refreshDepList();
  }

  refreshDepList(){
    this.service.getDepList().subscribe(data=>{
      this.DepartmentList=data;
    });
  }

}


在此处输入图像描述

标签: sql-serverangular

解决方案


尝试将异步管道添加到 ngFor 指令


推荐阅读