如何修复无法读取角度数据表上未定义的属性'length'

问题描述 投票:0回答:1

[伙计们,我想使用BehaviorSubject和Promises更新我的数据库,为此,我构建了一个程序,但是发现我的变量(包含Datatable数据的对象)在为我发现的调试后未定义:

TypeError:无法读取Object.eval中未定义的属性'length' [作为updateDirectives]

我的代码:

component.html:

<div id="products" class="page-layout carded fullwidth inner-scroll">

    <div class="top-bg accent"></div>

    <div class="center">
        <div class="header accent"
             fxLayout="column" fxLayoutAlign="center center"
             fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center">

            <div class="logo mb-24 mb-md-0"
                 fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
                    shopping_basket
                </mat-icon>
                <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
                    Products
                </span>
            </div>

            <div class="search-wrapper mx-32 mx-md-0">
                <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
                    <mat-icon>search</mat-icon>
                    <input #filter placeholder="Search for a product">
                </div>
            </div>

            <button mat-raised-button
                    [routerLink]="'/apps/e-commerce/products/new'"
                    class="add-product-button fuse-white mt-24 mt-md-0">
                <span>ADD NEW PRODUCT</span>
            </button>


        </div>

        <div class="content-card">

            <mat-table class="products-table"
                       #table [dataSource]="dataSource"
                       matSort
                       [@animateStagger]="{value:'50'}"
                       fusePerfectScrollbar>

                <ng-container matColumnDef="Nfamille">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
                    <mat-cell *matCellDef="let product">
                        <p class="text-truncate">{{product.FirstName}}</p>
                    </mat-cell>
                </ng-container>
                <ng-container matColumnDef="Prenom">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
                    <mat-cell *matCellDef="let product">
                        <p class="text-truncate">{{product.LastName}}</p>
                    </mat-cell>
                </ng-container>
                <ng-container matColumnDef="Etat">
                    <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell>
                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-md>
                        <p class="category text-truncate">
                            {{product.DriverStatus}}
                        </p>
                    </mat-cell>
                </ng-container>
                <ng-container matColumnDef="Departemant">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
                        <p class="price text-truncate">
                            {{product.DepartmentString}}
                        </p>
                    </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>

                <mat-row *matRowDef="let product; columns: displayedColumns;"
                         class="product"
                         matRipple>
                </mat-row>

            </mat-table>

            <mat-paginator #paginator
                           [length]="dataSource.filteredData.length"
                           [pageIndex]="0"
                           [pageSize]="10"
                           [pageSizeOptions]="[5, 10, 25, 100]">
            </mat-paginator>

        </div>
    </div>
</div>

和我的component.ts:

 dataSource: FilesDataSource | null;

  displayedColumns: string[] = ['Nfamille','Prenom','Etat','Departemant'];

  listdata: MatTableDataSource<any>;  

  @ViewChild(MatPaginator, {static: true})
  paginator: MatPaginator;

  @ViewChild(MatSort, {static: true})
  sort: MatSort;

  @ViewChild('filter', {static: true})
  filter: ElementRef;

  constructor(private service: GetionChauffeursService) { this._unsubscribeAll = new Subject();}
    private _unsubscribeAll: Subject<any>;
  ngOnInit() {
    this.dataSource = new FilesDataSource(this.service, this.paginator, this.sort);

    fromEvent(this.filter.nativeElement, 'keyup')
    .pipe(
        takeUntil(this._unsubscribeAll),
        debounceTime(150),
        distinctUntilChanged()
    )
    .subscribe(() => {
        if ( !this.dataSource )
        {
            return;
        }

        this.dataSource.filter = this.filter.nativeElement.value;
    });
}





}
export class FilesDataSource extends DataSource<any>
{
    private _filterChange = new BehaviorSubject('');
    private _filteredDataChange = new BehaviorSubject('');


    constructor(
      private service: GetionChauffeursService,
        private _matPaginator: MatPaginator,
        private _matSort: MatSort
    )
    {
        super();

        this.filteredData = this.service.listDriverElementEntity;
        console.log('here filter ' + this.service.listDriverElementEntity);//That log is show me undefiend

    }

    connect(): Observable<any[]>
    {
        const displayDataChanges = [
            this.service.onProductsChanged,
            this._matPaginator.page,
            this._filterChange,
            this._matSort.sortChange
        ];

        return merge(...displayDataChanges)
            .pipe(
                map(() => {
                        let data = this.service.listDriverElementEntity.slice();

                        data = this.filterData(data);

                        this.filteredData = [...data];

                        data = this.sortData(data);
                            const startIndex = this._matPaginator.pageIndex * this._matPaginator.pageSize;
                        return data.splice(startIndex, this._matPaginator.pageSize);
                    }
                ));
    }

    get filteredData(): any
    {
        return this._filteredDataChange.value;
    }

    set filteredData(value: any)
    {
        this._filteredDataChange.next(value);
    }

    get filter(): string
    {
        return this._filterChange.value;
    }

    set filter(filter: string)
    {
        this._filterChange.next(filter);
    }


    filterData(data): any
    {
        if ( !this.filter )
        {
            return data;
        }
        return FuseUtils.filterArrayByString(data, this.filter);
    }
}

最后,这是我的服务:

 driverList: any;
  resultDrivers:GetUIDriverManagementParamResult;
  listDriverElementEntity:ListDriverElementEntity[];
  onProductsChanged: BehaviorSubject<any>;
httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }
constructor(private http: HttpClient) {        
    // Set the defaults
    this.onProductsChanged = new BehaviorSubject({}); }
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    return new Promise((resolve, reject) => {

      Promise.all([
          this.getProducts()
      ]).then(
          () => {
              resolve();
          },
          reject
      );
  });
  }
 getProducts(): Promise<any>
    {
        return new Promise((resolve, reject) => {
          this.http.post(`${this.GeneralURL}/GetUIDriverManagementParam`, JSON.stringify(this.data), this.httpOptions)
                .subscribe((response: any) => {
                  this.driverList = json2array(response) ;
                  this.resultDrivers =  this.driverList ;
                 this.listDriverElementEntity = this.resultDrivers[0].ListDriverElement;
                 console.log( this.listDriverElementEntity);
                    //this.products = response;
                    this.onProductsChanged.next(this.listDriverElementEntity);
                    resolve(response);
                }, reject);
        });
    }
angular
1个回答
0
投票
© www.soinside.com 2019 - 2024. All rights reserved.