2 回答

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>`

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));
}
- 2 回答
- 0 關注
- 140 瀏覽
添加回答
舉報