只显示特定的 ngIf 项目

Question

我创建了一个 toggle-show-more-items 组件，它是一个显示更多值的按钮。但如果我有多个 toggle-show-more-items 组件，它会打开它们。我如何定位特定项目我将在下面向您展示我是如何做到的。

<div *ngFor="let bucketName of bucketNames" [hidden]="!getBucketsWithValues(bucketName.criterium).length">
  <ng-container *ngIf="bucketName.toon_maximaal && open">
    <div *ngFor="let bucket of getBucketsWithValues(bucketName.criterium) | orderBy:'key'; let ndx = index">
         <osi-checkbox *ngIf="ndx >= bucketName.toon_maximaal" 
            [model]="filter[bucketName.criterium][bucket.key].checked" 
            (change)="onFilterChange(filter[bucketName.criterium][bucket.key], $event.checked)">

            <osi-li-body class="osi-black-87">{{ bucket.key }}&nbsp;({{ bucket.doc_count }})</osi-li-body>

         </osi-checkbox>
    </div>
  </ng-container>

  <div *ngIf="bucketName.toon_maximaal && getBucketsWithValues(bucketName.criterium).length > bucketName.toon_maximaal">
    <toggle-show-more-item [openTitle]="'OWC.SHOW_MORE' | translate | uppercase" [closeTitle]="'OWC.SHOW_LESS' | translate | uppercase" 
         [padding]="false" (onToggleClick)="showMore($event)"></toggle-show-more-item>
  </div>
</div>

这是 showMore 方法：

showMore(open) {
   this.open = open;
}

Answer 1

您可以使用 indexes

为bucketNames数组的每一项添加一个open 属性，这样你就可以设置一个项目是否在"showMore mode"中。

而不是

*ngFor="let bucketName of bucketNames"

使用

*ngFor="let bucketName of bucketNames; let i = index"

然后更改您的 showMore 函数：

(onToggleClick)="showMore($event, i)"

并在你的 ts 中进行调整：

showMore(open, index) {
   this.bucketNames[index].open = open; // Access only the element at given index
}

您还需要更改组件 *ngIf ：

<ng-container *ngIf="bucketName.toon_maximaal && bucketName.open">

作为组件方法的替代方法，您也可以在模板中设置打开。

(onToggleClick)="bucketNames[i].open = $event"

只显示特定的 ngIf 项目

Only show specific ngIf item

ionic3

angular5

angular6