我想知道如何使用搜索欄（https://stackblitz.com/edit/stackoverflowcom-a-60857864-6433166-dpaump）和下面的代碼能夠使用其名稱過濾卡片。這是我的 Explore TS 文件（我從不同的文件導(dǎo)入了 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> 這就是現(xiàn)在的樣子[![在此處輸入圖像描述][1]][1]注意：我沒有將上面的代碼包含在我的 Stackblitz 文件中，因為涉及到很多組件，我想知道是否有人可以幫助我或給我一些關(guān)于如何通過查看上面的代碼來實現(xiàn)卡片過濾功能的提示堆棧閃電戰(zhàn)文件。
2 回答
SMILET
TA貢獻1796條經(jīng)驗 獲得超4個贊
柑橘朋克的答案有效，但這里有一些解釋
HTML：
<input type="text"
[(ngModel)]="searchText" (ngModelChange)="searchTextChanged($event)" />
時間：
在 ngOnInit 之后 forEach 將 pubWorkspaces 存儲在單獨的數(shù)組中
workspaces.forEach(workspace => {
if(workspace.type == WorkspaceType.public){
this.pubWorkspaces.push(workspace);
}
});
this.filteredPubWorkSpaces= this.pubWorkspaces;
當(dāng)搜索發(fā)生變化時，下面的函數(shù)會被調(diào)用，并且假設(shè)您在 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>`
白衣非少年
TA貢獻1155條經(jīng)驗 獲得超0個贊
您可以制作一個顯示結(jié)果的附加列表。只需在初始化組件時復(fù)制完整列表即可。在搜索欄更改事件中，您可以調(diào)用一個函數(shù)，該函數(shù)使用搜索詞過濾原始列表并將其保存到額外的變量中：
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));
}
- 2 回答
- 0 關(guān)注
- 149 瀏覽
添加回答
舉報
0/150
提交
取消