Ребята, я хочу обновить свою базу данных, используя BehaviorSubject и Promises, и для этого я создаю программу, но обнаружил, что моя переменная (которая содержит объект данных) после определения отладки не определена:
TypeError: Невозможно прочитать свойство 'length' с неопределенным значением в Object.eval [как 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>
и My 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);
});
}