angular - 如何将 mock.ts 文件中的数据绑定到组件？

Question

我有一个模拟员工文件并导入到employeelistcomponent。在组件中，我定义了一个属性employee 来绑定mock.ts 中的Employee Array。但它不起作用。没有数据被播放。我究竟做错了什么？

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: 
      '[e-mail]', active: true },
      { id:2, firstname: 'Sirius', lastname: 'Black', emailId: 
      '[e-mail]', active: false },
      ];

component.html

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

标签： angularcommand-line-interface

Answer 1

嗨，原因是员工是一个数组，而不是单个项目。您将不得不使用 *ngFor

因此，请将您的 HTML 更改为：

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