Question

我正在发送多个REST GET调用，以从外部资源中检索数据。

我可以看到发出的请求以及相关数据的返回。但是在最后一次回应之后，我得到了：错误TypeError：无法读取未定义的属性“名称” 在Object.eval [作为updateRenderer]（ProductcatalogComponent.html：14）

我的假设是，收集多个呼叫时，我存储数据的方式不正确……

这是我service.ts中的功能

  getData() {
    return this.getProducts('/v1/catalog/products');
  }

 getProducts(url, dataSoFar = []): Observable<any[]> {
    if (!url) {
      return of (dataSoFar);
    } else {
      url = ZUORA_URL + url;
    }
    return this.http.get<any>(url, { headers }).pipe(
      switchMap(p => this.getProducts( p.nextPage, [...dataSoFar, ...p.data]))
    );
  }

这是我从组件中调用它的方式：

  ngOnInit() {
    this.zuoraService.getData().subscribe(catalog => {
      this.dataSource = new MatTableDataSource(<Catalog[]>catalog);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });
  }

这是模型：

export interface Catalog {
  name: string;
  id: string;
  sku: string;
  description: string;
  IsTrialProduct__c: string;
}

这是html文件

<div class="mat-horizontal-content-container">
  <h1><i class="material-icons">dvr</i> Productcatalog</h1>
</div>

<div class="mat-elevation-z8">
  <mat-form-field style="width: 100%">
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>

  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>

    <ng-container matColumnDef="sku">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>
      <td mat-cell *matCellDef="let row">{{row.sku}}</td>
    </ng-container>

    <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
        <td mat-cell *matCellDef="let row">{{row.description}}</td>
    </ng-container>

    <ng-container matColumnDef="IsTrialProduct__c">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Trial</th>
        <td mat-cell *matCellDef="let row">{{row.IsTrialProduct__c}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openAccountDetails(row.ID)"></tr>
  </table>

  <mat-paginator #paginator
      [length]="dataSource.data.length"
      [pageIndex]="0"
      [pageSize]="25"
      [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>
</div>

如何解决此问题？我将不得不在不同的组件上使用数据。数据不会经常更改->一次预取并缓存数据的最佳方法是什么？

Answer 1

更改了服务：

public getCatalog() {
    console.log(this.catalog);
    return this.catalog;
  }

  loadCatalog() {
    this.fetchCatalog().subscribe(catalog => this.catalog.next(catalog));
  }

  public fetchCatalog(): Observable<Catalog[]> {
    return this.http.get<Catalog>(ZUORA_URL + '/v1/catalog/products?page=1&pageSize=10', { headers })
      .pipe(
        expand(catalog => {
          if (!catalog.nextPage) {
            return EMPTY;
          }
          return this.http.get<Catalog>(ZUORA_URL + catalog.nextPage, { headers });
        }),
        map(catalog => catalog.products),
        reduce((accData, data) => accData.concat(data), []),
      );
  }

将工厂添加到app.module.ts中->数据在应用程序构建时被加载一次->用户每次更改视图时都不必重新加载数据

export function catalogProviderFactory(zuoraService: ZuoraService) {
  return () => zuoraService.loadCatalog();
}

用于构建表的组件OnInit：

  ngOnInit() {
    this.zuoraService.catalog$.subscribe(catalog => {
      this.dataSource = new MatTableDataSource(catalog);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });

错误TypeError：无法读取属性“名称”-角材料表

1 个答案: