时间戳

首页 > 解决方案 > 在 *ngFor、angular6 中使用 Sat-popover

angular - 在 *ngFor、angular6 中使用 Sat-popover

问题描述

我正在尝试在 *ngFor 中使用 sat-popover，这样我就可以为不同的按钮设置多个 sat-popover 实例。

坐在弹出窗口

它不工作。请帮我。

标签： angular

解决方案

使用模板 ref 获取 SatPopover 的 ref

组件.ts

@ViewChildren('p') allPopovers: QueryList<SatPopover>;

组件.html

<sat-popover *ngFor="let popover of users" #p [horizontalAlign]="'before'" verticalAlign="above">
    <div class="info-wrapper">
        Username: {{ popover.username }} <br>
      Posts: {{ popover.posts }}
    </div>
  </sat-popover>


<div *ngFor="let tpl of allPopovers;let i = index"style="margin: 100px 200px;">
  <button [satPopoverAnchorFor]="tpl" (click)="tpl.toggle()">More Info-{{i+1}}</button>
</div>

摆脱表达式已更改错误 Inject ChangeDetectionRef 然后使用将检查视图及其子项的 detectChanges 方法

constructor(private cdr: ChangeDetectorRef) {}
ngAfterViewInit(){
    this.cdr.detectChanges();
  }

示例：https ://stackblitz.com/edit/sat-popover-queryxhildren-luwzzf

推荐阅读