Angular 使用*ngFor循环遍历数组，使用*ngIf从数组中选择要列出的元素

我正在尝试使用*ngFor在一个对象数组中循环。我意识到我不能在同一个元素上使用*ngFor和*ngIf，它将返回一个错误。相反，我尝试将我的*ngIf粘贴到列表项的内容上。但是现在，我得到了一堆空的列表项，它们被创建并显示在我的查看页面上

我不想在我的元素上粘贴*ngFor，因为这样它将创建一组元素，每个元素中都有一个列表项

我希望你们中的一位能有另一种方法来实现这一点

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

我使用的是Material Design Lite，所以所有这些元素都有一些css属性。清空只返回一个特定高度的空白空间

---

另外，如果需要其他信息，请告诉我。

带星号的*ngFor和*ngIf都是，它们生成标签：

结构指令，比如ngIf，通过使用HTML5模板标记发挥其魔力

您可以使用以下语法获得所需的功能：

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

---

示例：

感谢您的回复，您应该能够将ngFor与ngIf一起使用。我意识到我在使用beta版。6：太棒了！这很有魅力。谢谢你的回答，同时也提供了资源：回答很好，我也遇到了同样的问题，这为我指明了正确的方向。顺便说一句，联系人对我不起作用，让联系人来做吧。如果我需要显示一个应该始终有序的索引，该怎么办？当我使用index时，它跳过ngIf返回false的项目的索引。