Question

这是我的ts档案。

import { Component } from '@angular/core';

@Component({
    selector: "my-app",
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']

})
export class AppComponent  {
    employees: [
        { name: "ABC", position: "Programmer" },
        { name: "CDF", position: "HR" }
    ];
}

这是我的html文件

<h3>List Of Records </h3>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let emp of  employees ">
            <td>{{emp.name}}</td>
            <td>{{emp.position}}</td>
            <td>
                <input type="submit" id="edit" value="Edit">
                <input type="submit" id="delete" value="Delete">
            </td>
        </tr>
    </tbody>
</table>

我不知道为什么我无法在我的桌子中获得这两个属性。而且我也无法同时获得编辑和删除按钮。但当我删除ngFOr指令比我能看到这两个按钮

Answer 1

正确的是

employees = [
  { name: "ABC", position: "Programmer" },
  { name: "CDF", position: "HR" }
];

您正在使用＆＃39;：＆＃39;这意味着您正在定义员工的类型＆＃39;属性。你必须使用＆＃39; =＆＃39;运算符设置其值。

Answer 2

你可以使用“：”这是正确的语法

  employees:Array<object> = [
    { name: "ABC", position: "Programmer" },
    { name: "CDF", position: "HR" }
  ];

无法使用ngFor指令操作数据

2 个答案: