ngIf 仅在 ngFor 的一个部分中列出

Question

我正在使用 Angular8 并有一个 ngFor 来显示一组人。

这是数组

private myArray: {}[] =
    [
        {
            "name": "name1",
            "description": "description goes here",
        },
        {
            "serviceName": "name2",
            "description": "description goes here",
        }
    ]

这是HTML

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul *ngIf="isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>

我有一个 foreach 循环，它循环遍历数组，如果它是数组中的第一个，则将 isName1 更改为 true。

this.myArray.forEach(s => {

  if(name === 'name1') {
    this.isName1 = true;
  }
});

我想要做的是让 ul 只显示第一个元素而不显示第二个元素，但它会同时显示两个元素。有什么办法可以做到这一点？谢谢

Answer 1

将if(name === 'name1')更改为if(s.name === 'name1')

s.name

这样试试：

this.myArray.forEach(s => {

  if(s.name === 'name1') {
    this.isName1 = true;
  }
});

Answer 2

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul *ngIf="details.name === 'name1'">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>

Answer 3

考虑使用 ng-template

使用的美妙之处在于它不会在 HTML 中显示（作为内联或块元素）。

示例代码：

<div class="content" *ngFor="let details of myArray">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul>
    <ng-template [ngIf]="isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
      </ng-template>
      <ng-template [ngIf]="!isName1">
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
      </ng-template>
    </ul>
</div>

Answer 4

据我所知，你想在 ngfor 中限制项目，这很重要 link

所以你的代码看起来像

<ng-container *ngFor="let details of myArray;let i=index" >
<div class="content" *ngIf="i==0">
    <h2>{{details.name}}</h2>
    <div class="description">{{details.description}}</div>

    <ul >
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item1</span>
        </li>
        <li>
            <i class="fa fa-check-circle"></i>
            <span>item2</span>
        </li>
    </ul>
</div>
</ng-container>

Answer 5

如果您总是只想将条件应用于第一个元素，尽管有值，您可以使用 first，它由 [=24= 提供] 在 *ngFor。所以就没有必要使用 forEach 循环：

<div class="content" *ngFor="let details of myArray; let first = first">
  <h2>{{details.name}}</h2>
  <div class="description">{{details.description}}</div>

  <ul *ngIf="first">
    <li>
      <i class="fa fa-check-circle"></i>
      <span>item1</span>
    </li>
    <li>
      <i class="fa fa-check-circle"></i>
      <span>item2</span>
    </li>
  </ul>
</div>

STACKBLITZ

ngIf 仅在 ngFor 的一个部分中列出

ngIf list only on one section in ngFor

angular

typescript

ngfor

angular8