Angular 2 管道问题显示数据

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

}

我的管道如下（我觉得是filter函数的问题，它的作用是遍历user对象，寻找user.knowledgeLevel.media.java值，和里面的javalevel值比较HTML，如果它等于或大于该值，return it):

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;
                        }
                    }
                }
            }
        })
    }
}

我的table（我只会post第table行）生成的是这个：

<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值和上面的table一样在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时，应该returntrue/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;
      }
    }
  }
})

Angular 2 管道问题显示数据

Angular 2 Pipes problems displaying data

mongodb

angular

typescript

pipes-filters