【问题标题】:*ngFor on ng-template outputs nothing Angular2ng-template 上的 *ngFor 不输出任何内容
【发布时间】:2017-04-03 06:22:25
【问题描述】:

不知道为什么我的 *ngFor 循环没有打印出来。我在 html 文件中有以下代码:

<table class="table table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Company</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <!-- NGFOR ATTEMPTED HERE -- no content printed -->
        <ng-template *ngFor="let xb of tempData">
            <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
                <td>{{ xb.name }}</td>
                <td>{{ xb.email }}</td>
                <td>{{ xb.company }}</td>
                <td>{{ xb.status }}</td>
            </tr>
            <!-- other content -->
        </ng-template>
    </tbody>
</table>

然后,在我的简单组件中,我有以下内容:

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

@Component({
    selector: 'my-profile-exhibitors',
    templateUrl: './profile-exhibitors.component.html',
    styleUrls: ['./profile-exhibitors.component.scss']
})
export class ProfileExhibitorsComponent {
    public tempData: any = [
        {
            'name': 'name1',
            'email': 'email1@gmail',
            'company': 'company',
            'status': 'Complete'
        },
        {
            'name': 'name2',
            'email': 'email2@gmail',
            'company': 'company',
            'status': 'Incomplete'
        }
    ];
    constructor() {}
}

当我运行这段代码时,我得到零输出。更奇怪的是,当我使用调试工具选择元素时,我会看到:

看起来它正确识别了我的对象,但没有输出任何内容。

【问题讨论】:

    标签: angular


    【解决方案1】:

    我想你想要的是

    <ng-container *ngFor="let xb of tempData">
    

    <ng-template ngFor let-xb [ngForOf]="tempData">
    

    【讨论】:

    • 谢谢!并且为ng-template设计语法的人需要被烧死
    • 不确定您在抱怨什么。这是正常的 Angular 模板语法。他们引入了&lt;ng-container&gt;,以便能够在&lt;template&gt; 元素上使用更简洁、更常见的*xxx 语法。
    • 他们使用 ng-container 做出了明智的决定。这种语法非常不直观。
    • 不,不是 ;-) ngFor 添加一个带有选择器 ngFor 的指令,let-xb 使模板实例化的上下文在模板 [ngForOf]="tempData" 中可用,将 tempData 分配给ngFor 指令。这是很常见的 Angular2 模板语法。你应该适应它。例如,如果您想使用ngForTemplatengTemplateOutlet,或者如果您构建自定义结构指令,如*ngIf*ngFor
    • 很好的答案,解决了我的问题。 ng-template 语法毫无意义,并且与 anguaar 中的任何其他内容完全不一致 - let-xb 来创建一个名为 xb 的变量? wtf?
    【解决方案2】:

    也用于获取索引:&lt;ng-template ngFor let-xb [ngForOf]="tempData" let-index="index"&gt;

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-11-11
      • 1970-01-01
      • 2019-12-05
      • 2015-05-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-10-23
      相关资源
      最近更新 更多