Question

我有一个加载屏幕，大约需要15-30秒，具体取决于加载的数据。它在页面上加载大约50个项目并显示：

Loading item x

它为每个对数据库进行的数据调用使用了一个observable / subscription。收到数据后，订阅将触发并将其添加到HTML字符串中：

sync() {
    this.syncStatus = "Starting sync"
    this.syncService.sync().subscribe((status: string) => {
        this.syncStatus += "<div>" + status + '</div>';
    }, (error: string) => {
        console.log(error);
    }, () => {
        this.Redirect();
    });
}

<div class="description"> <span [innerHTML]="syncStatus"></span> </div>

截至目前，它只是显示列表并且它切断了列表显示，因为它变得如此之长（再次，50多个项目，有时数百个）。我想知道，如何将每个单独的项目显示在页面上5s然后隐藏它？

Answer 1

您可以使用项目的插入时间创建对象数组，然后根据此属性过滤数组。

sync() {
    this.syncStatus = [{ msg: 'Starting Sync', time: Date.now() }];
    this.syncService.sync().subscribe((status: string) => {
        this.syncStatus.unshift(status);
        this.removeOldEntries();
    }, (error: string) => {
        console.log(error);
    }, () => {
        this.Redirect();
    });
}

然后过滤旧条目：

removeOldEntries() {
   this.syncStatus = this.syncStatus.filter((status) => status.time < Date.now() - 300000); // 5 minutes
}

Answer 2

如果你利用Angular中的组件
，那就太好了

Stack Blitz, Source Code

解释

您不需要创建日期来检查收到数据的时间
您不需要过滤大量数据
如果使用Angular组件方法，生活会更容易，每个组件都将负责自行删除

Main Component.ts

export class AppComponent {
  data = [
    "Hello 0"
  ];

  count = 1;

  ngOnInit() {
    // Think of this as your subscription to backend
    setInterval(() => {
      if (!this.data) {
        this.data = []
      }

      this.data.push("Hello " + this.count ++);
    }, 1000);
  }
}

Main Component.html

<div class="description">
   <div *ngFor="let datum of data; let i = index">
     <hello [ref]="data" [index]="i">{{datum}}</hello>
   </div>
</div>

Hello.ts

@Component({
  selector: 'hello',
  template: `<ng-content></ng-content>`
})
export class HelloComponent  {
  @Input() ref;
  @Input() index: number;

  ngOnInit() {
    // This code will remove this component, upon 
    // the timeout you specify
    setTimeout(() => {
      this.ref.splice(this.index, 1);
    }, 5000);
  }
}

Angular 4加载屏幕：将项目添加到html并在5秒后隐藏它

2 个答案: