Функция преобразования трубы

Question

Я новичок в Angular.

Можете ли вы объяснить мне, как работает функция преобразования, например, в этом примере: поиск поля ввода в angular?

в первом ответе есть:

transform(value: any, searchValue): any {
    if (!searchValue) return value;
    return value.filter((v) => 
    v.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 || 
    v.size.toLowerCase().indexOf(searchValue.toLowerCase()) > -1)

  }

Что делает этот код?

if (!searchValue) return value;

Answer 1

Ваш метод преобразования канала имеет 2 аргумента value и searchValue. он проверяет ваше searchValue является ложным. если это ложно, он вернет значение параметра как есть. иначе он будет фильтровать массив значений на основе переданного searchValue. фильтрация выполняется путем проверки поля имени или размера (преобразованного в нижний регистр) каждого элемента массива значений, содержащего searchValue.

Примечание. В JavaScript имеется только шесть ложных значений: undefined, null, NaN, 0, "" (пустая строка) и false

Для использования канала в шаблоне

{{ value | pipename:searchValue }}

pipename - это имя вашей трубы
value - есть первый аргумент вашего метода преобразования
searchValue - это второй аргумент вашего метода преобразования

Answer 2

если searchvalue - ложь, тогда вернуть оригинальное значение, иначе массив []. Ложь означает, что когда вы пропускаете пустую строку и не указываете значение в поле поиска,

Значение является массивом, и оно будет фильтроваться на основе searchValue. Независимо от имени в массиве значений, я могу указать его в нижнем регистре, а также searchValue в нижнем регистре, а затем найти с помощью indexOf, если оно больше> -1, это означает, что мы нашли соответствие и возвращаем отфильтрованный массив.

Answer 3

Вы должны поставить дополнительный аргумент для этой трубы. Например:

{{ value | app-pipe:searchValue }}

Если вы не введете дополнительный аргумент, pipe вернет значение.

Answer 4

Если searchValue равно нулю, это условие всегда возвращает значение, но если в нем что-то есть, канал возвращает значения, в которых их имя и / или размер содержат значение поиска.

поэтому в этом примере, если searchvalue пусто, отображаются все folderOb js, но, например, если searchValue = 'a', оно показывает только папки, в названии или размере которых есть «a»;