需要帮助w /延迟加载mat-accordion内容

Question

我正在使用Angular 5和mat-accordion来显示作者列表。每位作者都写过多本书和文章。作者姓名显示在面板标题中，面板内容显示所有书籍，文章等。

因为我想展示100多个作者，每个作者有50多个条目，我不想一次填充整个手风琴和内容。我希望发生的是，当用户点击作者时，它会启动查询数据库的服务，然后根据需要填充面板内容。如果面板关闭，则内容应保持不变，因此重新展开面板不会启动另一个数据库查询。

因此，当我访问该页面时，我会看到作者Alice，Bob和Eve。当点击Alice时，应用程序查询数据库，获取Alice的条目，呈现内容，然后手风琴扩展。当我点击Eve时，应用程序应关闭Alice的面板，查询数据库，获取Eve的条目，呈现内容，最后展开面板。

如果我再次单击Alice，则Eve的面板会关闭，但由于Alice的内容已经存在，因此没有数据库查询或渲染。它只是扩大了。文档说使用ng-template，但我不知道该怎么做，而且真的不知道怎么做，所以内容在面板关闭后仍然存在。我并不担心数据发生变化需要再次获取Alice的数据，以防万一发生变化。

有什么例子可以解决这个问题的最佳方法吗？

谢谢！

G. Tranter的回答是正确的，我走的是正确的道路。如果其他人最终在这个页面上，这就是我最终做的事情。

ngOnInit(){ 
    this.authorsRetrieved.subscribe( authors => {
        this.allAuthors = authors as Array;
        this.authorsRetrieved = new Array(
            Math.max.apply(Math, this.allTrainers.map(function(t){ return t.trainer_id; }))
        );
// as authors are added and deleted, the author_id won't equal the number of 
// authors, so get the highest id number, create an array that long
// then fill it with blanks so the keys have some value
            this.authorsRetrieved.fill([{}]);
        });

---

showAuthorsWorks(authorID: Number = -1){
    if(authorID > this.authorsRetrieved.length){
      const tempArray = new Array(authorID - this.authorsRetrieved.length + 1);
      tempArray.fill([{}]);
      this.authorsRetrieved = this.authorsRetrieved.concat(tempArray);
    }
// only make the network call if we have to
// because we filled the id array, we can't just use length
if(typeof(this.authorsRetrieved[authorID][0]['manuscript_id']) === 'undefined'){
  this.authorWorksService.getAuthorWorks(authorID).subscribe( works => {
    this.worksRetrieved.splice(authorID, 0, works as Array<any>);
  });
}

我添加了一个检查几乎不可能的情况，其中数组长度小于最大author_id。您必须创建一个由N个元素组成的空数组，然后填充该数组。如果不这样做，则空数组的长度为0，并且无法将数据推送到不存在的数组元素。即使在Chrome控制台上，它表示长度为N且元素在那里，只是空的。

再次感谢！

Answer 1

如果您指的是与ng-template一起使用的MatExpansionPanelContent指令，那么所有这一切都会延迟加载内容，直到打开面板。它不知道它是否已被加载。因此，如果您对{{lazyContent}}等内容使用绑定表达式，则每次打开选项卡时都会对其进行评估。您需要自己管理内容缓存。一种简单的方法是通过吸气剂。

在您的组件中：

_lazyContent: string;
get lazyContent() {
    if (!this._lazyContent) {
        this._lazyContent = fetchContent();
    }
    return this._lazyContent;
}

加上你的HTML：

<mat-expansion-panel>
    ...
    <ng-template matExpansionPanelContent>
        {{lazyContent}}
    </ng-template>
    ....
</mat-expansion-panel>

所以ng-template负责延迟加载，getter负责缓存内容。