angular – 使用* ngFor循环遍历数组,使用* ngIf选择要列出的数

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

我不想在我的< ul>上坚持使用* ngFor因为那时它会创建一堆< 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>

我正在使用Material Design Lite,因此所有这些元素都将具有一些css属性.空< li>只返回一定高度的空白空间.

另外,如果需要其他信息,请告诉我.

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