使用* ngFor循环访问一个数组，并且* ngIf从数组中选择要列出的元素

我试图使用*ngFor来遍历一组对象。我意识到我不能在同一个元素上使用*ngFor和*ngIf，它会返回一个错误。相反，我试图将我的*ngIf贴在列表项的内容上。但现在，我收到了一堆空的列表项目，它们正在创建并显示在我的视图页面上。使用* ngFor循环访问一个数组，并且* ngIf从数组中选择要列出的元素

我不想将*ngFor粘在我的<ul>元素上，因为它会创建一堆带有单个列表项的<ul>元素。

我希望你们中的一个会有另一种方法来实现这一点。

// AppComponent 
// contacts: Contact[]; // An array of `Contact` Objects 

<ul> 
    <li *ngFor="#contact of contacts"> 
    <contact-detail *ngIf="checkList(contact) == true" [contact]="contact"></contact-detail> 
    </li> 
</ul>

和...

// ContactDetailComponent 
<img /> 
<span>{{contact.name}}</span> 
<span>{{contact.email}}</span>

正在发生的事情：

<ul> 
    <li> 
    <!--template bindings={}--> // ngIf conditional returned true 
    <img /> 
    <span>Name1</span> 
    <span>Email1</span> 
    </li> 
    <li> 
    <!--template bindings={}--> // ngIf conditional returned false 
    </li> 
    <li> 
    <!--template bindings={}--> // false 
    </li> 
    <li> 
    <!--template bindings={}--> // true 
    <img /> 
    <span>Name1</span> 
    <span>Email1</span> 
    </li> 
</ul>

我使用的材质设计精简版，所以所有这些因素都会有一些CSS属性。空<li>只返回一定高度的空白空间。

此外，如果需要其他信息，请让我知道。

来源

2016-03-04 philip yoo

你应该能够在[beta.8]使用ngFor与ngIf（https：//开头的github .com/angular/angular/issues/6304） – Sasxa

感谢您的回复。我意识到我正在使用beta.6 :) –

两个* ngFor和* ngIf（带星号）是structural directives和他们产生<template>标签：

结构的指令，例如ngIf，通过使用HTML 5模板标签做他们的魔法。

你可以得到你想要使用此语法功能：

<ul> 
    <template ngFor #contact [ngForOf]="contacts"> 
    <li *ngIf="checkList(contact) == true" > 
     <contact-detail [contact]="contact"></contact-detail> 
    </li> 
    </template> 
</ul>

例如：http://plnkr.co/edit/JeDbVi4pXrzJ5SRIonjH?p=preview

来源

2016-03-04 01:31:09 Sasxa

太棒了！这工作像一个魅力。感谢您的伟大答案，并提供资源:) –

伟大的答案，我有同样的问题，并指出我在正确的方向。顺便说一句“#contact”不适合我，“让联系”做到了。 –

我添加了最新的Angular4代码。 –

使用* ngFor循环访问一个数组，并且* ngIf从数组中选择要列出的元素

回答

相关问题