多个* ngFor来迭代数组

Question

Angular 7中的属性插值

这是我的employee.component.ts文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {
  tableTitle = 'Team Details';
  public employeeID: string;
  public employeeName: string;
  public employeeDepartment: string;
  public employee = [this.employeeID = '100', this.employeeName = 'Ankit', this.employeeDepartment = 'ABCD'];
  public employee1 = [this.employeeID = '101', this.employeeName = 'Amar', this.employeeDepartment = 'ABCD'];
  public employee2 = [this.employeeID = '102', this.employeeName = 'Suraj', this.employeeDepartment = 'ABCD'];
  public employee3 = [this.employeeID = '103', this.employeeName = 'Guru', this.employeeDepartment = 'PQR'];
  public employee4 = [this.employeeID = '104', this.employeeName = 'Shubham', this.employeeDepartment = 'PQR'];

  constructor() {}

  ngOnInit() {}

}

这是我的employee.component.html

<div class="container">
  <table  align="center" class="table table-striped table-dark">
    <thead>
      <tr>
        <th colspan="3">  {{tableTitle}}
          </th>
      </tr>
    </thead>
    <thead>
      <tr>
        <th scope="col">Employee ID</th>
          <th scope="col">Employee Name</th>
            <th scope="col">Designation</th>
      </tr>
    </thead>
    <tbody>

      <tr *ngFor="let employees of employee">
        <th scope="row">{{employees.employeeID}}</th>
          <td align="center">{{employees.employeeName}}</td>
          <td align="center">{{employees.employeeDepartment}}</td>
      </tr>
      <tr>
        <th scope="row">101</th>
          <td align="center">Amar</td>
          <td align="center">Software Engineer</td>
      </tr>
      <tr>
        <th scope="row">102</th>
          <td align="center">Guru</td>
          <td align="center">Software Engineer</td>
      </tr>
      <tr>
        <th scope="row">103</th>
          <td align="center">Shruti</td>
          <td align="center">Software Engineer</td>
      </tr>

      <tr>
        <th scope="row">104</th>
          <td align="center">Suraj</td>
          <td align="center">Trainee</td>
      </tr>
    </tbody>
  </table>
</div>

我需要遍历所有员工阵列并为每个阵列运行* ngFor并在标签内单独添加数据。

有人可以帮我解决我的代码。通过重写或通过提供可能的解决方案。我不想使用andy JSON文件或任何MAT_TABLE。只想坚持基础并将数据从.ts文件插入到数组的.html文件中。

Answer 1

我不确定你在组件代码中使用如此多的数组到底是做什么的。您在Component中拥有的每个employee属性都是一个数组，它有一个键，并使用=为它们赋值。

你应该拥有的是一个JavaScript对象数组。

在组件类中尝试此操作：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tableTitle = 'Team Details';

  employees = [
    { employeeID: '100', employeeName: 'Ankit', employeeDepartment: 'IM SGGS' },
    { employeeID: '101', employeeName: 'Amar', employeeDepartment: 'IM SGGS' },
    { employeeID: '102', employeeName: 'Suraj', employeeDepartment: 'IM SGGS' },
    { employeeID: '103', employeeName: 'Guru', employeeDepartment: 'IM SGGS' },
    { employeeID: '104', employeeName: 'Shubham', employeeDepartment: 'IM SGGS' },
  ];

  constructor() { }

  ngOnInit() {
  }
}

在你的模板中：

<div class="container">
    <table align="center" class="table table-striped table-dark">
        <thead>
            <tr>
                <th colspan="3">
                    {{tableTitle}}
                </th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th scope="col">Employee ID</th>
                <th scope="col">Employee Name</th>
                <th scope="col">Designation</th>
            </tr>
        </thead>
        <tbody>

            <tr *ngFor="let employees of employees">
                <th scope="row">{{employees.employeeID}}</th>
                <td align="center">{{employees.employeeName}}</td>
                <td align="center">{{employees.employeeDepartment}}</td>
            </tr>
        </tbody>
    </table>
</div>

---

这是你的参考的Working Sample StackBlitz。