使用rxjs角度异步拉动保持Bootstrap下拉菜单打开

时间:2018-08-18 01:43:44

标签: angular rxjs

我有一个观察到的结果,我每5秒钟拉一次,然后创建一个附在表中tr项上的bootsrap菜单。由于观察值每5秒刷新一次,因此菜单也是如此。文件刷新时,菜单关闭。如何保持打开状态?

this.filess$ = Observable.timer(0, 10000).exhaustMap(() => 
this.requestService.getDriveFiles(this.driveId).do(o=>  
{this.cd.detectChanges();}));



          <tr *ngFor="let file of filess$ | async ">

              <td>

                  <div class="dropdown">

                      <a class="spec-link" data-toggle="dropdown">

                        <img alt="{{file.FileExt}}" src="data:image/png;base64,{{file.Icon}}" />{{file.OriginalFileName}}

                      </a>

                      <ul class="dropdown-menu dropdown-menu-center" role="menu"  x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 36px, 0px); top: 0px; left: 0px; will-change: transform;">

                          <li role="presentation"><span role="menuitem" style="cursor:pointer;padding-left:5px;padding-right:5px;font-size:14px;font-weight:700;" (click)="fileDownload(file.DocID, file.OriginalFileName, file.FileExt)"><i class="fa fa-download"></i> View</span></li>

                          <li role="presentation"><span role="menuitem"  style="cursor:pointer;padding-left:5px;padding-right:5px;font-size:14px;font-weight:700;" (click)="clipboard(file.DocID, file.OriginalFileName)"><i class="fa fa-copy"></i> Copy link to clipboard</span></li>

                          <hr />

                          <li role="presentation"><span role="menuitem" style="cursor:pointer;padding-left:5px;padding-right:5px;font-size:14px;font-weight:700;" (click)="fileModal(file.DocID)"><i class="fa fa-info-circle"></i> Update properties</span></li>

                          <li role="presentation"><span role="menuitem" style="cursor:pointer;padding-left:5px;padding-right:5px;font-size:14px;font-weight:700;" (click)="fileRemove(file.DocID)"><i class="fa fa-trash"></i> Remove</span></li>

                          <li *ngIf="file.CheckedOut == false" role="presentation"><span role="menuitem" style="cursor:pointer;padding-left:5px;padding-right:5px;font-size:14px;font-weight:700;"  (click)="openDlFile(file.FileName, file.FileExt)"><i class="fa fa-pencil-square-o"></i> Edit + Check-Out</span></li>

                          <li *ngIf="file.CheckedOut == true" class="disabled" role="presentation"><span role="menuitem" style="padding-left:5px;padding-right:5px;font-size:14px;"><i class="fa fa-pencil-square-o"></i> Edit + Check-Out</span></li>

                         <li *ngIf="file.CheckedOut == true" role="presentation"><span role="menuitem" style="cursor:pointer;padding-left:5px;padding-right:5px;font-size:14px;font-weight:700;"  (click)="checkinFile(file.FileName, file.FileExt)"><i class="fa fa-pencil-square-o"></i> Manual Check-In</span></li>

                         <li *ngIf="file.CheckedOut == true" class="disabled" role="presentation" ><span role="menuitem" style="padding-left:5px;padding-right:5px;font-size:14px;"><i class="fa fa-check"></i> Checked out by {{file.CheckedOutBy}}</span></li>

                        </ul>

                      </div>

                </td>

              <td>

0 个答案:

没有答案