当前位置: 首页 > 知识库问答 >
问题:

角度显示过滤不正确

闻人举
2023-03-14

当用户选择一个标记时,我只想显示包含该标记的博客。例如,当一个用户选择了'c''标签时,只会显示带有该标签的帖子。

我的设置如下:我有一组包含post标签的博客,其中包含标签:

 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   
}

null

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']
}
}

这将显示blog-thumbnail组件

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[] = [];
    blogTagSession: IPostTags[] = [];

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

我在这方面花了大量的时间。有人能解释我做错了什么吗?

共有1个答案

澹台蕴藉
2023-03-14

为什么你有2个过滤器操作符?我认为:

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

应该够了。

 类似资料:
  • 我有完全合法的数据来源: 我将其显示在这样的表中: 现在假设我想过滤我的数组。如果我有固定的行数,我可以在< code>tr元素上使用< code>*ngIf来选择显示/不显示一个项目,但是Angular不允许在一个元素上有两个结构指令。 我知道我可以使用< code>Array.filter简单地过滤源数组,但是这样会产生一个副本,如果我的数组大得多,这可能会成为一个问题。 我想将该行嵌套在某个

  • 问题内容: 我有一个像这样的小角度应用程序: html app.js 输出 我想做的是 仅对 过滤器参数进行 完全 匹配,并且仅对id字段进行过滤。 基本上,我希望输出为: 输出 我正在使用Angular 1.2。 问题答案: 在Angular 1.1.3或更高版本中,可以使用以下命令: 说只能和现场比较。那会让你: 说“完全匹配”,结果是: 工作原理如下:http : //jsfiddle.ne

  • 问题内容: 我想在 angularjs 1.2中 使用unsafe-html 。没有html的过滤器可以工作,而html则不能。我做的事: 我在我的html头中添加了angular-sanitize: 我的角度模块: 我的HTML: 编辑:更新为 问题答案: 已在Angular 1.2中删除。由于您正确地清理了输入内容,因此应该使用。 示例:http://plnkr.co/edit/0bHeXra

  • 问题内容: 我有一个带有一系列对象属性的对象,这些对象属性具有以下相似的结构(这是从服务返回数据的方式): 当我执行ng-repeat时,我可以遍历所有这5个对象,例如: 但是, 我真正想要做的是仅对那些不是“ foo”类型的项进行迭代 ,即3次迭代而不是5次。我知道可以以某种方式利用过滤器来执行此操作,但是我不确定如何执行。我尝试了以下方法: 但这不起作用。实际上,即使执行以下操作以将对象限制为

  • 我的工作在窗口和视觉工作室和我的目标是尝试定义一个语法来识别一些短语的部分我遵循这个指南https://theantlrguy.atlassian.net/wiki/display/ANTLR4/Getting开始与ANTLR v4 一封又一封,当我 grun你好r-gui cmd没有显示任何内容,它没有显示任何类型的错误我该如何解决这个问题?谢谢大家!!! PS指南告诉添加antlr-4.5-c

  • 问题内容: 我目前正在使用文本输入来过滤项目列表。我想这样做,以便在设置特定变量时,无论文本输入是什么,列表都不会过滤。关于如何实现此目标的任何建议? 问题答案: 如果将过滤器表达式设置为(或)(这会导致不应用过滤器)(设置您的时间),否则将其设置为实际过滤器表达式,则可以实现此目的。 编辑2 :另一个答案(@Ryan下面)更简单易懂。现在不记得它最初是否对我不起作用,或者我只是没有想到这种简单的