Несколько * ngFor для итерации массивов в <td> - PullRequest
Новая
       21

Несколько * ngFor для итерации массивов в <td>

0 голосов
/ 11 января 2019

Атрибут интерполяции в угловых 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 для каждого массива и добавить данные отдельно в тег.

Может кто-нибудь, пожалуйста, помогите мне с моим кодом. Переписав его или дав возможное решение для того же. Я не хочу использовать Энди JSON файл или любой MAT_TABLE. Просто хочу придерживаться основ и интерполировать данные из файла .ts в файл .html из массивов.

1 Ответ

0 голосов
/ 11 января 2019

Я не совсем уверен, что именно вы делаете с таким количеством массивов в коде компонента. Каждое свойство сотрудника, которое вы имеете в своем Компоненте, является массивом, и оно имеет ключ и присваивает им значения, используя =.

Вместо этого у вас должен быть массив объектов 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>

Вот Рабочий образец StackBlitz для вашей ссылки.

...