亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何以角度過濾墊卡

如何以角度過濾墊卡

至尊寶的傳說 2023-10-17 15:48:39
我想知道如何使用搜索欄(https://stackblitz.com/edit/stackoverflowcom-a-60857864-6433166-dpaump)和下面的代碼能夠使用其名稱過濾卡片。這是我的 Explore TS 文件(我從不同的文件導入了 matcard 和路由器組件)import { Router } from '@angular/router';import { WorkspaceService } from 'src/app/core/services/workspace.service';import { Workspace, WorkspaceType } from 'src/app/shared/models/workspace.model';這是顯示卡片的 HTML 文件 <mc-workspace-card-list [workspaces] = "pubWorkspaces" [editable] = "false"></mc-workspace-card-list>   這就是現在的樣子[![在此處輸入圖像描述][1]][1]注意:我沒有將上面的代碼包含在我的 Stackblitz 文件中,因為涉及到很多組件,我想知道是否有人可以幫助我或給我一些關于如何通過查看上面的代碼來實現卡片過濾功能的提示堆棧閃電戰文件。
查看完整描述

2 回答

?
SMILET

TA貢獻1796條經驗 獲得超4個贊

柑橘朋克的答案有效,但這里有一些解釋


HTML:


<input type="text"

[(ngModel)]="searchText" (ngModelChange)="searchTextChanged($event)" />

時間:


在 ngOnInit 之后 forEach 將 pubWorkspaces 存儲在單獨的數組中


   workspaces.forEach(workspace => {

        if(workspace.type == WorkspaceType.public){

          this.pubWorkspaces.push(workspace);

        }

      });

   this.filteredPubWorkSpaces= this.pubWorkspaces;

當搜索發生變化時,下面的函數會被調用,并且假設您在 pubws 對象中有 name 屬性。


searchTextChanged(searchText){

 //return array of workspace only having search text in their names

  this.filteredPubWorkSpaces= this.pubWorkspaces.filter(pubws=>pubws.name.includes(searchText));

}

將其傳遞給組件


 `<mc-workspace-card-list [workspaces] = "filteredPubWorkSpaces" [editable] = "false"></mc-workspace-card-list>`




查看完整回答
反對 回復 2023-10-17
?
白衣非少年

TA貢獻1155條經驗 獲得超0個贊

您可以制作一個顯示結果的附加列表。只需在初始化組件時復制完整列表即可。在搜索欄更改事件中,您可以調用一個函數,該函數使用搜索詞過濾原始列表并將其保存到額外的變量中:


export class ExploreComponent implements OnInit, OnDestroy {


private workspaces;

public filteredWorkspaces;

public searchterm;


constructor(private workspaceService: WorkspaceService, private router: Router) { }



ngOnInit(): void {


    this.loading = true;

    this.workspaceService.getUserWorkspaces().subscribe((workspaces) =>{


    workspaces.forEach(workspace => {

      if(workspace.type == WorkspaceType.public){

        this.pubWorkspaces.push(workspace);

      }

    this.filteredWorkspaces = workspaces;

}


onInputChange(){

    this.filteredWorkspaces = this.workspaces.filter(ws => ws.name.includes(this.searchterm));

}


查看完整回答
反對 回復 2023-10-17
  • 2 回答
  • 0 關注
  • 140 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號