角度6中每个剑道网格行的弹出窗口

Question

我使用kendo网格和Angular6。每一行在kendo列中都有动作按钮，每一行都是（预览）。 通过单击它，它将仅在弹出窗口中预览此行信息。 我使用了本教程制作弹出窗口

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

并且它的工作原理是，除非我在任何行上按“显示”按钮，否则所有显示按钮都将打开弹出窗口，而对于关闭按钮相同，请关闭所有弹出窗口。

    <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单个变量中跟踪所有弹出窗口的活动状态。 这将导致所有弹出窗口同时显示/隐藏。

但是您需要跟踪每个行/数据项的活动状态。

跟踪每个数据项

一种选择是跟踪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>