Question

我已经对此html进行了编码：

<p-table #usersTable ...>
<p-table>

我正在尝试拾取此元素，以便在onLazyLoad事件上创建可观察的事件：

@ViewChild('usersTable')
private usersTable: ElementRef;

为了创建可观察的：

public ngAfterViewInit() {
    let lazyTable$ = Observable
        .fromEvent(this.usersTable.nativeElement, 'onLazyLoad')
        .pipe(debounceTime(300));
}

尽管如此，this.usersTable尚未定义。

另一方面，我完全不确定是否可以正确创建可观察的事件。

我用过

@ViewChildren(DataTable) private usersTable: QueryList<DataTable>;

尽管如此，query.length进行更改时始终为0：

let lazyClick$ = this.usersTable.changes
    .pipe(
        filter((query: QueryList<DataTable>) => {
            return query.length > 0;
        }),
        map((query: QueryList<DataTable>) => {
            return query.first;
        }),
        switchMap((table) => {
            return table.onLazyLoad.asObservable();
        })
    );

有什么想法吗？

Answer 1

如果您已注释表位于带有*ngIf的div内，则可以使用set content获取表的引用。

@ViewChild('usersTable') set content(usersTable: ElementRef) {
  if (usersTable) {
    let lazyTable$ = Observable
        .fromEvent(this.usersTable.nativeElement, 'onLazyLoad')
        .pipe(debounceTime(300));
  }
}

这样，此功能将在对条件*ngIf进行的每次更改（即表被显示或隐藏）时执行。

Answer 2

我可以像这样从lazyLoad事件创建Observable。

import { Table } from 'primeng/table';

  @ViewChild('usersTable') set content(usersTable: Table) {
    if (usersTable) {
      let lazyTable$ = usersTable.onLazyLoad.pipe(debounceTime(300));
      }
    }

Angular Primeng：从lazyLoad事件创建Observable

2 个答案: