* ngFor在ng-template上没有输出Angular2 [英] *ngFor on ng-template outputs nothing Angular2

查看:168
本文介绍了* ngFor在ng-template上没有输出Angular2的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

不确定为什么我的* ngFor循环什么都没打印出来.我在html文件中有以下代码:

Not sure why my *ngFor loop is printing nothing out. I have the following code in an html file:

<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>

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

Then, in my simple component I have the following:

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() {}
}

运行此代码时,输​​出为零.甚至更奇怪的是,当我使用调试工具选择元素时,会看到以下内容:

When I run this code, I get zero output. Even weirder is that when I select the element using debug tools I see this:

看起来像它可以正确识别我的物体,但是什么也不输出.

Looks like it correctly recognizes my object, but then outputs nothing.

推荐答案

我想你想要的是

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

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

这篇关于* ngFor在ng-template上没有输出Angular2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆