Question

我试图使用*ngFor循环遍历一个对象数组。我意识到我无法在同一元素上使用*ngFor和*ngIf，它会返回错误。相反，我试图将*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>

我使用的是Material Design Lite，因此所有这些元素都会有一些css属性。空<li>只返回一定高度的空白空间。

此外，如果需要其他信息，请告知我们。

Answer 1

* 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

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

1 个答案: