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

考虑使用 ng-template

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

示例代码:

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