Angular 2：按嵌套數組中的值進行過濾？

我一直在通過Raynda Villalobos上的Lynda.com（https://github.com/planetoftheweb/learnangular）這個GitHub回購實驗 - 它的功能類似於我希望構建的基本Web應用程序，但我最近打了一下的路障。Angular 2：按嵌套數組中的值進行過濾？

在這回購上面鏈接，在應用程序/ component.app.ts，是以下的數組：

var ARTISTS: Artist[] = [ 
    { 
    "name": "Barot Bellingham", 
    "shortname": "Barot_Bellingham", 
    "reknown": "Royal Academy of Painting and Sculpture", 
    "bio": "Some bio here." 
    }, 
    // etc... 
]

此陣列由管過濾，如應用程序/ pipe.search.ts看出：

export class SearchPipe implements PipeTransform { 
    transform(pipeData, pipeModifier) { 
    return pipeData.filter((eachItem) => { 
     return eachItem['name'].toLowerCase().includes(pipeModifier.toLowerCase()) || 
     eachItem['reknown'].toLowerCase().includes(pipeModifier.toLowerCase()); 
    }); 
    } 
}

這裏的濾波器輸入：

<input class="search-input" [(ngModel)]="field1Filter" placeholder="type in search term here" (click)="showArtist(item); field1Filter=''">

而且代碼過濾結果：

<ul class="artistlist cf" *ngIf="field1Filter"> 
    <li class="artistlist-item cf" 
    (click)="showArtist(item);" 
    *ngFor="let item of (artists | search: field1Filter)"> 
    <artist-item class="content" [artist]=item></artist-item> 
    </li> 
</ul> 
<artist-details *ngIf="currentArtist" [artist]="currentArtist"></artist-details>

這一切都完美的作品，但是，在我的項目，我需要包括三個嵌套的數組，並有基於這些陣列過濾的值的能力。我需要看起來像這樣的類型的數組的一個示例：

var ARTISTS: Artist[] = [ 
    { 
    "name": "Barot Bellingham", 
    "shortname": "Barot_Bellingham", 
    "reknown": "Royal Academy of Painting and Sculpture", 
    "bio": "Some bio here...", 
    "friends": [ 
     "James", 
     "Harry", 
     "Bob", 
     "Liz", 
     "Kate", 
     "Jesse" 
    ], 
    "emails": [ 
     "[email protected]", 
     "[email protected]" 

    ], 
    "car": [ 
     "honda", 
     "scion", 
     "aston martin" 
    ] 

    }, 
    // etc... 
]

因此，我希望能在「哈利」，以及包含「哈利」僅顯示對象在任何過濾「名」，「名望，「朋友」，「電子郵件」或「汽車」。這是可能的，如果是這樣，我如何編輯管道過濾器來做到這一點？謝謝！！

（我敢綠色在一般的角度和JS，所以我想，如果我使用了不正確的術語或忽略/誤解基本的東西提前道歉。）

來源

2017-06-22 Boosman

我刪除了我以前的答案，因爲它比有幫助更令人困惑。我粘貼了示例代碼，但沒有將其應用到變量/屬性/對象，這是誤導性的。讓我們再試一次：

export class SearchPipe implements PipeTransform { 
    transform(pipeData, pipeModifier) { 
    pipeModifier = pipeModifier ? pipeModifier.toLowerCase() : null; 
    return pipeModifier ? pipeData.filter(eachItem => { 
     eachItem['name'].toLowerCase().indexOf(pipeModifier) !== -1 || 
     eachItem['reknown'].toLowerCase().indexOf(pipeModifier !== -1) : pipeData; 
    }); 
    } 
}

的代碼轉換方法的第一行確保傳入的修改也小寫，這樣比較總是比較低的情況下的值。它也有一個空檢查，以確保它不會嘗試如果它爲空就將其小寫。

第二行代碼也使用「？」語法來處理null pipeModifier的情況。

我將includes更改爲indexOf。 Includes檢查數組。這些項目，比如eachItem ['name']，是一個數組嗎？

這應該更接近。

注意：沒有提供的plunker ...我沒有檢查此代碼的語法或正確執行。

來源

2017-06-23 23:40:07 DeborahK

非常感謝您的持續幫助和解釋，DeborahK！我會在一天左右的時間內製造一名運動員。但是，我已經使用了您的修改後的代碼，但它阻止了應用程序的加載，而我無法弄清楚爲什麼（控制檯說意外的分號）。請參閱[控制檯錯誤截圖（imgur.com]（http://imgur.com/a/l4p87）。當我使用我的問題中提供的過濾器時，不會觸發這個功能。再次感謝！ – Boosman

是否顯示其他錯誤？這是一個副作用，而不是實際的錯誤 – DeborahK

不，這是控制檯中顯示的唯一錯誤，它阻止了應用程序的加載。「正在顯示，這就是我的''標記裏面的內容 – Boosman

Angular 2：按嵌套數組中的值進行過濾？

回答

相關問題