2
我在Angular 2應用中多次重複加載表格顯示中的數據時遇到了一些問題。我認爲與此有關的主要問題與以下事實有關：在初始組件加載時，我將根據網絡請求發送一系列過濾器的數據。在角度應用中處理過濾值的更優雅的方式
基本上我們利用了Mongo/Mongoose功能，讓我們在發佈請求的對象正文中傳遞鍵/值對，然後基於這些傳入的值返回經過濾的數據集。此代碼如下所示：
private processType(name: string, value: any, body)
{
if (this.body[name] && !value) {
delete this.body[name];
} else {
this.body[name] = { $in: value };
}
}
所有按預期工作。然而，在我目前的實現中，感覺不太理想的是，在初始組件負載時，我爲每個過濾器傳遞了所有可能值的數組。從那裏用戶可以通過UI過濾器列表更改傳遞和過濾的內容。我在初始組件加載時爲每個過濾器傳遞可能值的整個數組，因爲如果我傳入一個空數組，NOTHING將匹配。但是，似乎應該有更好的方式來處理我最初的請求。
我理想地喜歡我最初的要求，實際上，「最初不要過濾任何東西」，而不是像我現在所做的那樣「最初過濾所有東西」。我現在已經這樣做了，因爲處理初始加載時的條件，以及在用戶刪除過濾器或所有過濾器的情況下都是有點棘手的。現在，在這兩種情況下，我只是再次傳入所有可能值的數組。我有的作品，但它看起來並不盡如人意。既然這一切都作爲post請求體中的一個對象傳遞，是否有一種方法可以刪除對象而不是傳遞一個包含所有值數組的對象？
這是我的相關代碼，其餘的樣子：
public initLanguageFilterOptions(): void
{
this.languageFilterOptions = new FilterOptions([
{ value: 'English', toString:() => 'English' },
{ value: 'Spanish', toString:() => 'Spanish' },
{ value: 'Mandarin', toString:() => 'Mandarin' }
]);
let arr = [];
// Update array when filter selection is made
arr.push(this.languageFilterOptions.addEventListener(FilterOptions.CHANGE_EVENT,() => this.sendLangSelections(true)));
// Update array when filter options are loaded from URL parameters
arr.push(this.languageFilterOptions.addEventListener(FilterOptions.URL_LOAD_EVENT,() => this.sendLangSelections(true)));
// Clean up after component is no longer used
this.addEventListener('ngOnDestroy', function()
{
arr.forEach(s => s()); // Remove all listeners
return true;
}.bind(this));
}
/**
* Handles the emitting of the selected values to the API
*/
private sendLangSelections(languageFilterOptions) {
const origLangArray = ['English', 'Spanish', 'Mandarin'];
if (languageFilterOptions)
{
let selectionsArray = this.languageFilterOptions.selection;
let values = selectionsArray.map((a) => { return a.value; });
if (values && values.length > 0)
{
this.sendLanguage.emit(values);
}
else if (values && values.length < 1)
{
this.sendLanguage.emit(origLangArray);
}
}
}
這是我的API調用來我們蒙戈/貓鼬/節點後端的樣子：
// A POST request to work with observables
public obsPost(strReq, page, pagesize, body, sort?) {
const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions({ headers: this.headers });
return this.http.post
(`${API.URL}/${API.VER}${strReq}?apikey=${API.KEY}&page=${page}&pagesize=${pagesize}`,
body, options)
.map((res: Response) => res.json())
.catch(this.filterErrorHandler);
}
filterErrorHandler(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}