Angular 2 Pipes 显示数据的问题

Question

我正在尝试显示来自 Mongodb 集合的数据并根据值对其进行过滤。

问题是即使在使用管道过滤数据之后，如果只有一个条目满足条件，则显示所有数据。我只想要满足所示条件的用户。这可能是一个逻辑错误，但我已经尝试了所有方法，但无法提出解决方案。

mongoDB的结构是这样的（例子）：

{
"_id": {
    "$oid": "590b8bfb51123bed5e4b6dda"
},
"city": "Madrid",
"type": "admin",
"username": "admin",
"password": "admin",
"email": "admin",
"phone": 123,
"knowledgeLevel": [
    {
        "category": "media",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6ddf"
        },
        "subcategories": {
            "javascript": 20,
            "html": 16,
            "css": 13,
            "java": 10,
            "net": 7,
            "php": 0,
            "c": 11,
            "development": 10,
            "network": 4,
            "security": 0,
            "patterns": 2,
            "logic": 17,
            "arithmetic": 9,
            "testing": 1
        }
    },
    {
        "category": "code",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6dde"
        },
        "subcategories": {
            "javascript": 0,
            "html": 0,
            "css": 0,
            "java": 0,
            "net": 0,
            "php": 0,
            "c": 0,
            "development": 0,
            "network": 0,
            "security": 0,
            "patterns": 0,
            "logic": 0,
            "arithmetic": 0,
            "testing": 0
        }
    },
    {
        "category": "use",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6ddd"
        },
        "subcategories": {
            "javascript": 0,
            "html": 0,
            "css": 0,
            "java": 0,
            "net": 0,
            "php": 0,
            "c": 0,
            "development": 0,
            "network": 0,
            "security": 0,
            "patterns": 0,
            "logic": 0,
            "arithmetic": 0,
            "testing": 0
        }
    },
    {
        "category": "think",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6ddc"
        },
        "subcategories": {
            "javascript": 0,
            "html": 0,
            "css": 0,
            "java": 0,
            "net": 0,
            "php": 0,
            "c": 0,
            "development": 0,
            "network": 0,
            "security": 0,
            "patterns": 0,
            "logic": 0,
            "arithmetic": 0,
            "testing": 0
        }
    },
    {
        "category": "create",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6ddb"
        },
        "subcategories": {
            "javascript": 0,
            "html": 0,
            "css": 0,
            "java": 0,
            "net": 0,
            "php": 0,
            "c": 0,
            "development": 0,
            "network": 0,
            "security": 0,
            "patterns": 0,
            "logic": 0,
            "arithmetic": 0,
            "testing": 0
        }
    }
],
"__v": 0

}

我的管道如下（我认为问题出在过滤器函数中，它的作用是遍历用户对象并查找 user.knowledgeLevel.media.java 值并将其与里面的 javalevel 值进行比较HTML，如果它等于或大于该值，则返回它）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'javafilter'
})

export class JavaFilter implements PipeTransform {

     transform(users: any, javalevel: any): any{
         if(javalevel === undefined) return users;

         return users.filter(function(user){
            for(let user of users){
                for(let kn of user.knowledgeLevel){
                    if(kn.category==='media'){
                        if(kn.subcategories.java>=javalevel){
                            console.log(user);
                            return user;
                        }
                    }
                }
            }
        })
    }
}

生成的我的表格（我只会发布表格行）是这个：

<tr *ngFor="let user of users | javafilter:javalevel" >
    <td id="center" class="col-md-4">{{user.email}}</td>
    <td id="center" class="col-md-3">{{user.phone}}</td>
 </tr>

javalevel 值与上表在同一个 HTML 中，如下所示：

 <div id="java">
         <div class="col-md-10"><h5>Java</h5></div>
         <div class="col-md-2"><h5>{{javalevel}}</h5></div>
         <input type="range" min="0" max="20" [(ngModel)]="javalevel" step="1" />
   </div>

提前谢谢你！

Answer 1

由于您使用的是Array.filter，请删除第一个for-loop，因为它们是相同的。 另外，当使用Array.filter时，你应该返回true/false，参考documentation。

return users.filter(function(user){
  for(let kn of user.knowledgeLevel){
    if(kn.category==='media'){
      if(kn.subcategories.java>=javalevel){
        console.log(user);
        return true;
      }
    }
  }
})