Question

API像这样返回数据：

{
    "data": {
        "collections": [
            {
                "id": 1,
                "name": "Collection One",
                "items": [
                    {
                        "id": 1,
                        "collection_id": 1,
                        "name": "Item One",
                        "myitems": [
                            {
                                "id": 21,
                                "quantity": 18
                            }
                        ]
                    },
                    {
                        "id": 2,
                        "collection_id": 1,
                        "name": "Item Two",
                        "myitems": [
                            {
                                "id": 22,
                                "quantity": 3
                            }
                        ]
                    },
                    {
                        "id": 3,
                        "collection_id": 1,
                        "name": "Item Three",
                        "myitems": []
                    },
            }
    }
}

我正在遍历数组并打印出集合名称，然后在遍历并打印出集合项。我还在打印“收藏夹”中的物品总数。

在此示例中，集合中有3个项目。用户可以多次收集每个项目，因此我们可以看到该用户已收集Item 1 18次，Item 2 3次和Item 3 0次。

我要做的是在“集合”中的项目总数旁边显示用户已收集的项目数。因此，在这种情况下，用户已从3中收集了2个项目。我不在乎他们收集的项目数量，我只关心用户已经收集了一个项目。因此，文字为Collection One: 2 of 3

这是在Ionic中的样子：

<span class="heading" name="fieldName" ngDefaultControl [(ngModel)]="collectionId[collection.id]"></span> of {{ collection.items.length || '0' }}

在这里我被困住了。我可以获得集合总数（3）;我正在用HTML编写代码，但是我无法获得项目数。我正在尝试的一切都无法正常工作。

getData() {
    return this.storage.get('token').then(res => {
        if (res) {
            this.http.get('http://api.example.com/collections)
                .subscribe((result: any) => {
                    for (const collection of result.data.collections) {
                        let quantity = [];
                        quantity[collection.id] = 0;
                        for (const item of collection.items) {
                            if (item.myitems.length) {
                                for (const myitem of item.myitems) {
                                    quantity[collection.id]++;
                                }
                            }
                        }
                        // here's where I'm trying to assign the item count
                        // to a variable so I can bind it to ngModel 
                        // in the view.
                        if (quantity[collection.id] > 0) {
                            collectionId[collection.id] = quantity[collection.id];
                        }
                    }

                }, error => {
                    console.warn(error);
                });
        }
    });
}

我希望这有道理！

Answer 1

我认为您可以执行以下操作：

let collectedCount = items.filter((item) => { return item.myitems.length }).length;

应该：

仅保留true的值为myitems.length的项目（因此>为0的项目）来过滤您的项目
将结果转换为最后一个.length的数字

更新

这将替换您无法使用的大部分代码。

您尚未发布所有代码，所以我不知道您正在做什么，但是我将从服务中获取数据，添加我额外的计算属性，然后将整个结果设置为我可以在ui中迭代的公共变量。

storedCollections: any;

getData() {
    return this.storage.get('token').then(res => {
        if (res) {
            this.http.get('http://api.example.com/collections)
                .subscribe((result: any) => {
                    for (const collection of result.data.collections) {
                      let collectedCount = items.filter((item) => { return item.myitems.length }).length;

                      collection.collectedCount = collectedCount;
                    }

                    this.storedCollections = result.data.collections;
                }, error => {
                    console.warn(error);
                });
        }
    });
}

我只是将其命名为storedCollections，以使其与您从api返回的.collections不同。

现在，在用户界面中，您的收集数据将拥有这个额外的collectedCount属性。

（在您未显示的更远的地方，您将循环storedCollections-无论ngFor是在collection的{{1}}中使您循环发布的内容）。

collection.items.length

Answer 2

好，因此我要解决此问题所需要做的就是更新跨度并使用innerText。

<span class="heading" [innerText]="collection[collection.id]"></span> of {{ collection.items.length || '0' }}

为什么我无法获得项目总数并将其绑定到ngModel？

2 个答案:

更新