打字稿代碼搜索和篩選

我想篩選用戶的搜索查詢的輸入，以便如果他們鍵入他們正在尋找的具體名稱，只有該事情返回。打字稿代碼搜索和篩選

我有一個Angular2演示應用程序（http://mazzoangular2.azurewebsites.net/）我正在處理這個問題，它只是返回搜索藝術家作品的搜索結果。現在它將返回所有包含輸入第一個字母的繪畫。

這裏是打字稿搜索代碼：

import { Pipe } from '@angular/core'; 

@Pipe({ 
    name: 'find' 
}) 

export class SearchPipe { 

    transform(pipeData, pipeModifier) { 
    return pipeData.filter((eachItem) => { 
     return 
eachItem['name'].toLowerCase().includes(pipeModifier.toLowerCase()) || 

eachItem['shortname'].toLowerCase().includes(pipeModifier.toLowerCase()); 
    }); 
    } 
}//End class SearchPipe 

SearchPipe.prototype.transform = function (pipeData, _a) { 
    var pipeModifier = _a[0]; 
    return pipeData.filter(function (eachItem) { 
    return 
eachItem['name'].toLowerCase().includes(pipeModifier.toLowerCase()) || 
eachItem['shortname'].toLowerCase().includes(pipeModifier.toLowerCase()); 
    }); 
}

來源

2017-05-30 Chris Mazzochi

好的，你的代碼有什麼問題？ – toskv

你可以去這個鏈接玩它http://mazzoangular2.azurewebsites.net但是，問題是搜索邏輯似乎沒有深入到直接輸入的具體名稱。例如，如果您鍵入搜索輸入字段中建議的名稱。 –

 SearchPipe.prototype.transform = function(pipeData, _a) { 
      var pipeModifier = _a[0]; 
      return pipeData.filter(function(eachItem) { 
       return eachItem['name'].toLowerCase().includes(pipeModifier.toLowerCase()) || eachItem['shortname'].toLowerCase().includes(pipeModifier.toLowerCase()); 
      }); 
     }

在代碼中，你只能用pipeModifer的第一個字符評價。你的過濾器邏輯工作正常，只是當你使用'Blah'進行搜索時，它只使用'b'並丟棄搜索的其餘部分。

發生這種情況是因爲在您的轉換函數聲明中，您正在將pipeModifier作爲數組的第一個元素傳遞。在打字稿中，這意味着它假設pipeModifier的第二個參數是一個數組，並且您希望pipeModifier成爲該數組的第一個元素。您可以通過只是改變的打字稿如何將這個爲Javascript

transform(pipeData, [pipeModifier])

到

transform(pipeData, pipeModifier)

實例解決這個問題：

打字稿功能

function test(var1, [var2, var3]){ 
    console.log(var2); 
}

得到的JavaScript函數

function test(var1, _a) { 
    var var2 = _a[0], var3 = _a[1]; 
    console.log(var2); 
}

不管數組有多大，它只會使用前兩個元素。

來源

2017-05-30 21:15:05

謝謝彼得。所以我將這個轉換函數添加到我的代碼中以修改搜索結果？我可以將該函數放置在導出類聲明上方？謝謝... –

添加了原始帖子的解釋 –

彼得我已經更新了我原來的帖子，以反映我對你所建議的代碼所做的更改。你可以去這個鏈接玩它mazzoangular2.azurewebsites.net但搜索功能似乎沒有深入到直接輸入的具體名稱。例如，如果您輸入在應用程序的搜索輸入字段中建議的名稱。 –

打字稿代碼搜索和篩選

回答

相關問題