Question

我正在使用angular 6应用程序，我需要一种方法来判断我的2D可观察数组是否为空。

这是我的模板：

<div *ngFor="let 1DArray of 2DArray$ | async">
  <div *ngFor="let item of 1DArray">{{ item.id }}</div>
</div>

这给了我一个ID列表。

这是我的组件代码：

  this.allItems$ = [];
  source.forEach(obj => {
    const colRef$ = this._firestoreService.colWithIds$(`Collection/${obj.id}/SubCollection`); // a collection of items
    this.allItems$.push(colRef$); // an array of collections (2D array)
  });
  this.2DArray$ = Observable.combineLatest(this.allItems$); // an observable of the 2D array

这使我可以观察到2D阵列。

我的问题是，如果没有要从firebase集合中检索的项目，则2D数组将不会为空。相反，它将由一堆空的一维数组组成：

[
[],
[],
…
]

我想在页面上的项目列表上方放置一个标签，例如“ ITEMS：”。但是，如果没有商品，我想取消显示此标签。

我可以通过设置一个标志来做到这一点，例如itemsExist：布尔值。我会这样设置：

this.itemsExist = false; 
this.allItems$ = [];
source.forEach(obj => {
    const colRef$ = this._firestoreService.colWithIds$(`Collection/${obj.id}/SubCollection`); // a collection of items
if (colRef$.length > 0) {
        this.allItems$.push(colRef$); // an array of collections (2D Array)
    this.itemsExist = true; 
}
  });
  this.2DArray$ = Observable.combineLatest(this.allItems$); // an observable of the 2D array

…，然后使用* ngIf将列表包装在模板中：

<div *ngIf=“itemsExist”>
ITEMS:
  <div *ngFor="let 1DArray of 2DArray$ | async">
    <div *ngFor="let item of 1DArray">{{ item.id }}</div>
  </div>
</div>
<div *ngIf=“!itemsExist”>
  There are no items to display.
</div>

但是我不能在可观察的物体上使用.length。据我所知，无法检查可观察阵列中有多少个项目。当然，除非您订阅它。然后，您只需获取阵列，即可检查其长度。我尝试过这样的事情：

  this.allItems$ = [];
  source.forEach(obj => {
    const colRef$ = this._firestoreService.colWithIds$(`Collection/${obj.id}/SubCollection`); // a collection of items
    this.allItems$.push(colRef$); // an array of collections (2D array)
  });
  this.2DArray$ = Observable.combineLatest(this.allItems$); // an observable of the 2D array
this.itemCount = 0;
this.2DArray$.subscribe(item2DArray => {
    item2DArray.forEach(item1DArray => {
        this.itemCount += item1DArray.length;
    });
});

然后我在* ngIf中检查itemCount。

但是，即使其中有项目，我的列表也不会显示。我还尝试订阅colRef $并检查1DArray的长度，仅当它大于0时才将其添加到allItems $中，但效果相同。订阅后，仍可以在* ngFor循环中使用可观察对象吗？

有什么方法可以检查可观察数组的长度？

Answer 1

您可以使用function timeConverter(UNIX_timestamp){ var a = new Date(UNIX_timestamp * 1000); var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; var year = a.getFullYear(); var month = months[a.getMonth()]; var date = a.getDate(); var hour = a.getHours(); var min = a.getMinutes(); var sec = a.getSeconds(); var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ; return time; } admin.firestore().collection('users').doc(userId).get() .then( (doc) => { const user = doc.data(); const birthDate = user.birthDate; const birthDateString = timeConverter(birthDate); console.log(`birthDateString =${birthDateString}`); // "birthDateString = NaN undefined NaN NaN:NaN:NaN" });管道来实现此目的。

示例：

| async

Answer 2

mat数据源是一个普通的ol打字稿对象，因此我创建了一个名为getCount的吸气剂，并且在dataSource中具有一个成员变量，该成员变量公开了响应长度。然后在分页器上，我简单地将[length]设置为dataSource.getCount（）。

如何检查可观察数组的大小？

2 个答案: