html - 从 api 调用数据并且不显示在前置表上，但它在控制台上以角度显示

Question

从 API 获取的数据没有显示在屏幕上，但我正在控制台中获取数据。

这是 .ts 文件。

export class VisibilityComponent implements OnInit {
  

  check = false;
  pmDetails1: IEmployee[];
  constructor( private userService: UserService) {
    this.pmDetails1 = [];
     }

  ngOnInit() {
  
     this.userService.getAllEmployee().subscribe((pmDetails1:       IEmployee[]) => {
      this.pmDetails1 = pmDetails1;
      console.log(this.pmDetails1);
    });


   }
   onItemChange(value) {
    if (value === '1' ) {
      this.check = true;
    } else {
      this.check = false;
    }
 }
 }

这是HTML文件

<div>
          <table class="table table-light" style="border: 1px solid">
            <thead style="background-color: aqua">
              <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Role</th>
              </tr>
            </thead>
            <tbody>
              <tr
                *ngFor="let p of pmDetails1"
              >
                <td>
                  <input
                    type="checkbox"
                    value="{{ p.id }}"
                    [checked]="check"
                  />
                </td>
                <td>{{p.name}}</td>
                <td>{{p.role}}</td>
              </tr>
            </tbody>
          </table>
        </div>

这是控制台上的输出

请帮我解决这个问题。

标签： htmlasp.netangulartypescriptapi

Answer 1

您的数据不包含元素id和。namerole

相反，它有employeeId,employeeName和employeeRole。您需要更新您的表代码。

<td>
    <input
       type="checkbox"
       value="{{ p.employeeId }}"
       [checked]="check"
    />
</td>
<td>{{p.employeeName}}</td>
<td>{{p.employeeRole}}</td>