小编Bob*_*sey的帖子

需要帮助,需要懒惰地加载手风琴内容

我正在使用Angular 5和mat手风琴来显示作者列表。每个作者写了多本书和文章。作者姓名出现在面板标题中,面板内容显示所有书籍,文章等。

因为我想显示100多位作者,每位作者有50多个条目,所以我不想一次填充整个手风琴和内容。我想发生的事情是,当用户单击作者时,它启动了一项服务,该服务查询数据库,然后适当地填充面板内容。如果关闭面板,则内容应保留,以便重新展开面板不会启动其他数据库查询。

因此,当我访问该页面时,我看到了作者爱丽丝,鲍勃和夏娃。当单击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([{}]);
        });
Run Code Online (Sandbox Code Playgroud)
showAuthorsWorks(authorID: Number = -1){
    if(authorID > this.authorsRetrieved.length){
      const tempArray = …
Run Code Online (Sandbox Code Playgroud)

lazy-loading accordion angular-material angular5

5
推荐指数
1
解决办法
2029
查看次数

如何在 ng serve 和 ng build 中使用不同的 index.html 文件?

由于我们在这里设置的方式,我的本地开发环境(ng serve)与我的生产构建环境(ng build --base-href="/path/" --prod。我想使用不同的 index.html 文件进行服务和构建,构建仍然生成正确的 index.html。

如果我更改 angular.json,我会收到一条消息,指出不允许属性 fileReplacements。不过,ng serve 的文件替换似乎最容易维护。

"serve": {
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

这给了我一个错误,即服务部分中不允许使用属性 fileReplacements。Package.json 有 @angular/core ^8.0 和 angular cli ~8.0.2。

每当我搜索解决方案时,我的结果都会指向 fileReplacements 文档,但这似乎不起作用。该文件不会被替换。我知道有很多其他方法可以做到这一点,但如果可能的话,我想以经批准的 angular.json 方式进行。

angular-cli angular

0
推荐指数
1
解决办法
5748
查看次数