Question

当用户选择一个标签时，我只想显示包含该标签的博客。例如，当用户选择“#C#”标签时，只会显示带有此标签的帖子。

我的设置如下：我有一系列博客，其中包含包含标签的帖子标签：

 export interface IBlog
{
    id: number
    title: string
    content: string
    subscription: number
    time: string
    created: Date;
    imageUrl: string
    coverImage: string
    image: string
    likes: number
    body: string
    comments?:{
        message: string
        handle: string,
        city: string,
        country: string
    },
    articleLinkUrl?: string,
    sessions: ISession[],
    mainComments: IComments[],
    postTags: IPostTags[]
}

export interface ISession
{
    id: number,
    name: string,
    presenter: string,
    duration: number,
    level: string,
    abstract: string,
    voters: string[]
}

export interface IComments
{
    id: number,
    message: string   
}
export interface IPostTags
{
    id: number,
    tag: ITag[]   
}
export interface ITag
{
    id: number,
    name: string   
}

我有一个 blog-list.component.ts：

import {Component, OnInit} from '@angular/core'
import { BlogService} from './shared/blog.service';
import { ActivatedRoute } from '@angular/router';
import { IBlog } from './shared';


@Component({

    template: `
    <div>
    <h1>Upcoming Blogs</h1>
    <hr/>  

    <div class= "btn-group btn-group-sm">
    <button class="btn btn-default" [class.active] = "filterBy==='all'" (click) = "filterBy='all'">All</button>
    <button class="btn btn-default" [class.active] = "filterBy==='c#'" (click) = "filterBy='#C#'">C#</button>
    <button class="btn btn-default" [class.active] = "filterBy==='angular'" (click) = "filterBy='#Angular'">Angular</button>
    <button class="btn btn-default" [class.active] = "filterBy==='netcore'" (click) = "filterBy='#NetCore'">.NET Core</button>
    </div>

        <div class ="row">                     
                <blog-thumbnail  [filterBy]="filterBy" [blogs] = "blogs"></blog-thumbnail>
               
            <div class='row' style="margin-bottom: 10px;">
            <div class="col-md-2">
                <h3 style="margin:0">Sort by Tag</h3>
            </div> 
                <div class="col-md-7">
                    <div class= "btn-group btn-group-sm" style="margin-right: 20px; margin-left: 20px;">
                    <button class="btn btn-default" [class.active] = "sortBy==='name'" (click) = "sortBy='name'">By Name</button>
                    <button class="btn btn-default" [class.active] = "sortBy==='votes'" (click) = "sortBy='votes'">By Votes</button>
                </div>               
        </div>        
        </div>
        </div>
    </div>`
})

export class BlogListComponent implements OnInit{
    blogs:IBlog[]
    filterBy: string = 'all';
    
    constructor(private blogService: BlogService, private route: ActivatedRoute){       
    }

ngOnInit(){
   this.blogs = this.route.snapshot.data['blogs']
}
}

这将显示一个博客缩略图组件

import {Component, Input, EventEmitter, Output, OnChanges} from '@angular/core'
import { forEach } from '@angular/router/src/utils/collection';
import { IBlog, IPostTags } from './shared';

@Component ({
    selector: 'blog-thumbnail',
    template: `
    <div class="row" *ngFor="let blog of blogsSession">
    <div [routerLink] = "['/blogs', blog.id]" class="well hoverwell thumbnail">
    <img src={{blog?.coverImage}}/>
    <h2>{{blog?.title | uppercase}}</h2>   
    <div>{{blog?.created | date}}</div>
    <div>Content: {{blog?.content}}</div>
    <div>Tags: {{blog?.content}}</div>
    <div well-title *ngIf="blog?.mainComments">
          {{blog?.likes}} Reactions
          <i *ngIf="blog?.likes >= 1" class="glyphicon glyphicon-heart-empty" style="color:red"></i>
          {{blog.mainComments.length}} Comments
          <i *ngIf="blog.mainComments.length >= 1" class="glyphicon glyphicon-comment" ></i>
    </div>  

    <div well-title *ngIf="blog?.postTags">
         
          {{blog.postTags.length}} Post Tags
          <i *ngIf="blog.postTags.length >= 1" class="glyphicon glyphicon-comment" ></i>
    </div>  

    </div>
    `,
    styles:[
        `
        .thumbnail {min-height: 210px;}
        .pad-left {margin-left: 10px;}
        .well div { color: #bbb;}
        
        `]
})

export class BlogThumbnailComponent implements OnChanges {
    @Input() blog: IBlog
    @Input() filterBy: string;
    @Input() blogs: IBlog[];
    blogsSession: IBlog[] = [];


    
    getStartTimeStyle(): any{
        if (this.blog && this.blog.time === '7:30pm')       
        return{color: '#003300', 'font-weight' : 'bold'}
        return{};

    }

    ngOnChanges(){
        if(this.blogs){
            this.filterSessions(this.filterBy);
            //this.sortBy === 'name' ? null : null;
        }   
    }
    
    filterSessions(filter){
        if(filter === 'all'){
            this.blogsSession= this.blogs.slice(0);
        }
            else
            {        

                 
                this.blogsSession = this.blogs.filter(blog => {               
                         return blog.postTags.filter( postTag =>{
                            postTag.tag.name === filter
                         })
                        })
this commented out code works but it is not what i want 
                // this.blogsSession = this.blogs.filter(blog => {               
                //     return blog.postTags.length < 2;                                                         
                //})
            }             
                   
            }   
        }

代码的以下部分是我遇到问题的地方。它不起作用：

     this.blogsSession = this.blogs.filter(blog => {               
                                 return blog.postTags.filter( postTag =>{
                                    postTag.tag.name === filter
})
                            })

我花了很多时间在这上面。有人能解释一下我在这里做错了什么吗？

Answer 1

filter() 方法中使用的函数应该返回 true 或 false（或者实际上是一个强制为 true 或 false 的值）。你的函数返回一个数组；您正在过滤 blog.postTags。

试试这个：

this.blogsSession = this.blogs.filter(blog => {               
    return blog.postTags.some(postTag => postTag.tag.name === filter)
})

如果数组中至少有一项满足函数中使用的条件，则 some() 方法将返回 true。

Answer 2

为什么有 2 个过滤器运算符？我认为：

  this.blogsSession = this.blogs.filterpostTags.filter( postTag =>{
                                    postTag.tag.name.toLocaleLowerCase() === filter.toLocaleLowerCase()
})

应该够了。

角度显示过滤不正确

2 个答案: