Я пытаюсь фильтровать массив в ngFor. Если я сделаю это ниже, я получаю сообщение об ошибке:

HTML:

<div *ngFor="let group of filterGroups(report.assetGroups)">

Ошибка: не удается прочесть свойство assetGroups из undefined.

Если я сделаю следующее, я получу еще одну ошибку:

HTML:

<div *ngFor="let group of filterGroups(report?.assetGroups)">

Ошибка:

TechnicalManagerReportComponent.html: 66 ERROR TypeError: _co.filterGroups не является функцией

Так что я застрял в том, как делать фильтрацию. Это моя функция фильтра:

filterGroups(itemList: AssetGroup[]): AssetGroup[] {
    let result: AssetGroup[] = [];

    return result;
}

Обратите внимание, что ngFor отлично работает без функции фильтра.

Мой метод инициализации:

ngOnInit() {
  this.route.params.subscribe( params => {      
    this.reportId = params.reportId;  

    this.apiService.getReportComplete(this.reportId).subscribe((data) => {    
      this.report = data;
      this.loadGraph(this.report);
    });
  });
}

И сервис:

getReportComplete(reportId:string):Observable<ReportComplete>{    
  var url = `https://xxx.azurewebsites.net/api/reportcomplete/${reportId}`;
  return  this.httpClient.get<ReportComplete>(url).pipe(
    map(x => new ReportComplete(x)));     
}
1
Thomas Segato 23 Окт 2018 в 21:07

2 ответа

Лучший ответ

Поскольку filterGroups правильно обрабатывает параметр null, вы можете проверить, определено ли report, и передать null, если это не так:

*ngFor="let group of filterGroups(report ? report.assetGroups : null)"

Обратите внимание, что исходный код с оператором безопасной навигации также должен работать:

*ngFor="let group of filterGroups(report?.assetGroups)"

См. этот stackblitz для демонстрации.

1
ConnorsFan 23 Окт 2018 в 19:18
<ng-container *ngIf="report">
    <div *ngFor="let group of filterGroups(report.assetGroups)">{{group}}</div>
</ng-container>

С помощью предоставленного кода вы присваиваете что-то свойству report после некоторого запроса, поэтому, вероятно, изначально это undefined или null - давайте добавим проверку для этого.

2
Buczkowski 23 Окт 2018 в 18:42
52955294