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

您可以使用索引

向bucketNames数组的每个项目添加open属性，以便您可以设置项目是否处于“ showMore模式”。

代替

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

您也可以在模板中将open设置为component方法的替代方法。

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

仅显示特定的ngIf项目

1 个答案: