Question

我有一个模拟雇员文件，并导入到employeelistcomponent。在组件中，我定义了一个属性employee来绑定来自嘲讽的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: 
      '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>

Answer 1

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

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

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

如何将数据从嘲讽文件绑定到组件？

1 个答案: