Как привязать данные из файла mock.ts к компоненту? - PullRequest
Новая
       22

Как привязать данные из файла mock.ts к компоненту?

1 голос
/ 02 мая 2019

У меня есть фиктивный файл сотрудника, который импортирован в компонент списка сотрудников. В компоненте я определил свойство employee для привязки массива Employee из mock.ts. Но это не работает. Данные не воспроизводятся. Что я делаю не так?

component.ts

    import { Component, OnInit } from '@angular/core';
    import { EmployeeService } from '../employee.service';
    import { EMPLOYEES } from '../mock-employees';
    import { Employee } from '../employee';

    @Component({
    selector: 'app-employee-list',
    templateUrl: './employee-list.component.html',
    styleUrls: ['./employee-list.component.css']
    })
    export class EmployeeListComponent implements OnInit {
    employee = EMPLOYEES;
    constructor() { }
    ngOnInit() { }
    }

mock-employees.ts

    import { Employee } from './employee';
    export const EMPLOYEES: Employee[] = [
      { id:1, firstname: 'Hermoine', lastname: 'Granger', emailId: 
      'hgranger@myfirst.com', active: true },
      { id:2, firstname: 'Sirius', lastname: 'Black', emailId: 
      'sblack@myfirst.com', active: false },
      ];

component.html

        <ul>
        {{employee.id}}
        {{employee.firstname}}
        </ul>

1 Ответ

1 голос
/ 02 мая 2019

Привет, причина в том, что сотрудник - это массив, а не отдельный элемент.Вам придется использовать * ngFor

. Пожалуйста, измените свой HTML-код на: 

<ul>
<li *ngFor="let e of employee">
{{e.id}} - {{e.firstname}}
</li>
</ul>
...