多个 *ngFor 迭代 <td> 中的数组

Question

Angular7 中的属性插值

这是我的 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 并在标签内单独添加数据。

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

Answer 1

我不太确定您在组件代码中使用这么多数组究竟在做什么。您在组件中拥有的每个员工属性都是一个数组，它有一个键并使用 =.

为他们分配值

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

在你的组件中试试这个 Class:

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>

Here's a Working Sample StackBlitz for your ref.

多个 *ngFor 迭代 <td> 中的数组

Multiple *ngFor to iterate the arrays in <td>

typescript

angular-directive

ngfor

angular