[在Angular中过滤时如何显示所有筹码

问题描述 投票:1回答:1

我真的是在现有代码基础上工作的新开发人员,现在我的任务是从芯片列表中选择一个特定芯片时显示卡中的所有芯片,但是我不确定如何修改此代码,所以我如果能得到任何帮助或建议,将不胜感激。

因此,我们现在有多个卡,其中包含自己的筹码和一个筹码列表,可以根据筹码过滤卡。当用户从“芯片列表”中选择特定芯片时,它将过滤所有卡并仅显示包含所选芯片的卡。

情况

现在,当从芯片列表中选择特定芯片时,卡内的所有芯片都将消失/过滤,除了用户选择的一个芯片。

试图实现

我仍然希望该卡显示其包含的每个筹码,而不仅仅是显示用户选择的内容。

<!--- Cards List -->
 <mc-workspace-card-list [workspaces]="filteredPubWorkSpaces"></mc-workspace-card-list>

<!-- Tags List -->
                <mat-chip *ngFor="let tag of tagList" [selected]="tag.state"
                    (click)="tag.state = !tag.state; changeSelected('s', tag.tag)"
                    [ngStyle]="{'background-color':tag.state? 'mediumturquoise' : '' }">
                    <img class="super-icon" *ngIf="tag.superTag || tag.type == TagType.super"
                        src="/assets/images/icons/super-tag-icon.svg">
                    {{tag.tag}}
                </mat-chip>
            </mat-chip-list>

  tagList: Tag[] = [];
  chartSearchResults: Chart[] = [];
  tagSearch: string[] = [];
  filteredPubWorkSpaces = [];

  ngOnInit(): void {
    var superTags: Tag[] = [];
    //get all the tags
    this.tagService.getAllTagsByType('super').subscribe((sTags) => {
      this.loading = true;
      if (sTags) {
        superTags = sTags;
      }
    });
    this.tagService.getAllTagsByType('user').subscribe((tags) => {
      if (tags) {
        this.tagList = superTags.concat(tags);
      }
    this.loading = false;
    });


  search(value: string, tags?: string[]) {
    if (!tags) {
      tags = [];
    }
    this.loading = true;
    this.chartSearchResults = [];
    this.searchService.search(value, tags, 0, 50).subscribe((data) => {
      if (data) {
        this.filteredPubWorkSpaces = data.results;
        for (let result of data.results) {
          if (this.chartSearchResults.length < 10) this.chartSearchResults = this.chartSearchResults.concat(result.charts);
        }
      }
      this.loading = false;
    })
  }


  changeSelected(parameter: string, query: string) {
    this.cdr.detectChanges();
    const index = this.tagSearch.indexOf(query);
    if (index >= 0) {
      this.tagSearch.splice(index, 1);
    }
    else {
      this.tagSearch.push(query);
    }
    this.search("", this.tagSearch);
  }

enter image description here

html angular typescript multidimensional-array angular-material
1个回答
0
投票

[在这里不可见,但是您的mc-workspace-card-list组件正在过滤显示(搜索)的药丸,或者您的searchService.search()方法正在过滤出药丸,而我猜是后者。

您需要修改search()方法以在工作区上返回完整的药丸列表

© www.soinside.com 2019 - 2024. All rights reserved.