Question

我在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();
  }

如何加载数据，以便隐藏进度条呢？

Answer 1

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

Answer 2

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

in .ts

this.dataServiceProcessed = true \ false

在HTML中

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

数据加载后的角度隐藏进度条

2 个答案: