angular 中每个 kendo 网格行的弹出窗口 6

Question

我使用 kendo 网格和 Angular 6. 每行在 kendo 列中都有操作按钮，这是每一行的（预览）。通过单击它，它会在弹出窗口中预览，只有这一行信息。我使用本教程制作弹出窗口

https://www.telerik.com/kendo-angular-ui/components/popup/

它起作用了，除非，如果我按任何行的 "show" 按钮，所有显示按钮都会打开弹出窗口，关闭按钮也一样，关闭所有弹出窗口。

    <kendo-grid-column field="tests" title="Actions" width="120" [locked]="true">
      <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">            
        <div>
          <div class="example-config">
            <button #anchor (click)="onToggle()" class="btn" class="btn btn-primary btn-lg gradient">{{toggleText}}</button>
          </div>
          <kendo-popup [anchor]="anchor" *ngIf="show" [animate]="animate">
<!--(anchorViewportLeave)="show = false"-->
            <div class='content'>
                   <--!content here-->
             </div>

Answer 1

您目前在一个名为 show 的变量中跟踪所有弹出窗口的活动状态。这会导致所有弹出窗口同时 show/hide。

但您需要根据 row/dataItem.

跟踪活动状态

每个数据项的跟踪

一个选项是在 dataItem 本身中跟踪行弹出窗口的活动状态。

<button #anchor (click)="dataItem.show = !dataItem.show" class="btn btn-primary">Preview</button>

<kendo-popup [anchor]="anchor" *ngIf="dataItem.show" [animate]="animate">
     <-- content here -->
</kendo-popup>

每行索引

或者，可以根据 rowIndex 在全局变量中跟踪活动状态。这是由 kendoGridCellTemplate.

提供的

<button #anchor (click)="show[rowIndex] = !show[rowIndex]" class="btn btn-primary">Preview</button>

<kendo-popup [anchor]="anchor" *ngIf="show[rowIndex]" [animate]="animate">
     <-- content here -->
</kendo-popup>

angular 中每个 kendo 网格行的弹出窗口 6

Popup for each kendo-grid row in angular 6

popup

kendo-ui

angular

每个数据项的跟踪

每行索引