代码之家 › 专栏 › 技术社区 › Sireini

仅显示特定ngIf项

angular6 angular5 ionic3

0

Sireini · 技术社区 · 7 年前

我创造了一个 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(open) {
   this.open = open;
}

1 回复 | 直到 7 年前

1

Marshal 7 年前

你可以用

添加 open 属性设置为bucketNames数组的每个项,以便您能够设置项是否处于“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">

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