Question

我正在使用Angular 6，并构建了一个自定义过滤器管道。当我将其与静态数据一起使用时，它可以正常工作，但是当我从服务中获取数据时，它会引发错误“无法将属性toLowerCase读取为null。下面是我的代码。

我正在使用的模型

export class Page {
pageID: number;
pageName: string;
module: string;
incomingEEP: string;
outgoingEEP: string;
}

我创建的服务

export class PageService {
urlString = 'localhost/8080/db/Page';
private pages: Page[] = [];
public pageUpdate = new Subject<Page[]>();

constructor(private httpClient: HttpClient) {}

public getPage() {
this.httpClient.get<Page>(this.urlString).subscribe(data => {
this.pages = data;
this.pageUpdate.next([...this.pages]);
});
}

public pageUpdateListener() {
retirn this.pageUpdate.asObservable();
}

这是我的组成部分

export class PageComponent implements OnInit, OnDestroy {
pages: Page[];
search = '';
pageSubscription: Subscription;

constructor(private pageService: PageService) {}
ngOnInit() {
this.pageService.getPage();
this.pageSubscription = this.pageService.pageUpdateListener().subscribe(data => {
this.pages = data;
}
}
}

<input type="text" [(ngModel)] = "search">
<clr-datagrid>
<clr-dg-column>Page</clr-dg-column>
<clr-dg-column>Module</clr-dg-column>
<clr-dg-column>Incoming EEP</clr-dg-column>
<clr-dg-column>Outgoing EEP</clr-dg-column>

<clr-dg-row *clrDgItems="let page of pages | filter:search" [clrDgItem]="page">
<clr-dg-cell>page.pageName</clr-dg-cell>
clr-dg-cell>page.module</clr-dg-cell>
clr-dg-cell>page.incomingEEP</clr-dg-cell>
clr-dg-cell>page.outgoingEEP</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>

最后这是我的过滤器。

@Pipe({
name: 'filter',
pure: false
})
export class FilterPipe implements PipeTransform {
transform(items: any[], search: string): any[] {
if (!items) return [];
if (!search) return items;

search = search.toLowerCase();

return items.filter(page => {
return page.pageName.toLowerCase().indexOf(search) >= 0
|| page.module.toLowerCase().indexOf(search) >= 0
|| page.incomingEEP.toLowerCase().indexOf(search) >= 0
|| page.outgoingEEP.toLowerCase().indexOf(search) >= 0;
});
}
}

Answer 1

使用异步管道

pages$ = this.pageService.pageUpdateListener();

并在视图中

<clr-dg-row *clrDgItems="let page of (pages$ | async | filter:search)" [clrDgItem]="page">

从服务返回数据时，筛选器管道会引发错误消息，即数据未定义

1 个答案: