数据加载后角度隐藏进度条答案

【问题标题】：Angular hide progressbar after data loads数据加载后角度隐藏进度条
【发布时间】：2017-11-26 22:46:46
【问题描述】：

我在 Angular 中使用 FireStore 实时数据库。
我想在从数据库加载数据之前显示一个进度条，并在加载后将其隐藏。
这是我的代码：

  export class KavPatuachChatComponent implements OnInit, AfterViewChecked {

  messagesCollection: AngularFirestoreCollection<MessageItem>;
  messages: Observable<MessageItem[]>;
  mAuthService: AuthService;
  constructor(public afs: AngularFirestore, public authService: AuthService) {
    this.mAuthService = authService;
  }
  ngOnInit() {
    this.getChatData();
}
  getChatData() {
    this.messagesCollection = this.afs.collection<MessageItem>('chat_messages', ref => ref.orderBy('DateTime'));
    this.messages = this.messagesCollection.valueChanges();
  }

我如何知道数据何时加载，以便隐藏进度条？

【问题讨论】：

标签： angular

【解决方案1】：

this.afs.collection<MessageItem>('chat_messages', ref => {ref.orderBy('DateTime'); 
//code to hide progress bar
});

【讨论】：

是的，但是我如何知道数据何时加载？哪里有事件或类似的事情知道？
上面我提到的那一行是一个回调函数。加载数据后将调用它。或者，您可以使用subscribe() 或其他回调函数
哦，但它给了我一个错误：'(ref: CollectionReference) => void' 类型的参数不可分配给'QueryFn' 类型的参数。类型“void”不可分配给类型“Query”
试试这个this.messagesCollection.valueChanges().map(actions => { //code goes here });
能否请您扩展您的答案以防止在 cmets 中解释解决方案。谢谢

【解决方案2】：

你不能在 HTML 组件中使用 *ngIf 吗？像这样在加载前后使用布尔变量来控制它

在 .ts 中

this.dataServiceProcessed = true \ false

在 HTML 中

<div *ngIf="dataServiceProcessed">  
  Display something
</div>

【讨论】：

是的，但是我如何知道数据何时加载？哪里有事件或类似的事情知道？
我不确定是否有更有效的方法，您可以创建一个数据服务，然后像这里stackoverflow.com/questions/47338271/… 一样订阅，所以在 this.dataA= dataAJSON 之后，然后设置您的布尔变量来控制*ngIf