在* ngFor，angular6

Question

我正在尝试在* ngFor中使用饱和弹出框，以便可以为不同的按钮使用多个饱和弹出框实例。

sat-popover

它不起作用。请帮助我。

Answer 1

使用模板引用获取SatPopover的引用

component.ts

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

component.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