角度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>