Question

考虑使用以下简单表格：

<nz-table #table [nzData]="users">
    <thead>
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of table.data">
        <td>{{item.id}}</td>
        <td>{{item.firstName}}</td>
        <td>{{item.lastName}}</td>
    </tr>
    </tbody>
</nz-table>

这个.ts文件：

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

interface User {
    firstName: string;
    latName: string;
}

@Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.scss']
})
export class ListComponent {
    users: User[] = [];
}

如何在firstName和lastName字段的html模板中获得智能感知？我的IDE表示item变量的类型为any，它应该为User类型。

为什么仍然需要模板引用？为什么我们不能只使用<tr *ngFor="let item of users">（除了分页不起作用的事实外）？

Answer 1

将nzTemplateMode设置为false，则无需像nzData这样将用户绑定到[nzData]="users"。然后，您可以直接使用<tr *ngFor="let item of users">

<nz-table [nzTemplateMode]="false" >
<thead>
<tr>
    <th>Id</th>
    <th>First Name</th>
    <th>Last Name</th>
</tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of users">
        <td>{{item.id}}</td>
        <td>{{item.firstName}}</td>
        <td>{{item.lastName}}</td>
    </tr>
    </tbody>
</nz-table>

Ng Zorro表-表中的项目类型为`any`（错误Intellisense）

1 个答案: