javascript - Làm thế nào để lọc các giá trị null bằng cách sử dụng pipe trong Angular?

Hiện tại tôi có một pipe trong Angular dùng để lọc kết quả dựa trên đầu vào của người dùng. Vấn đề duy nhất mà tôi gặp phải là một số kết quả không có giá trị, do đó tôi nhận được lỗi sau:

Không thể đọc thuộc tính 'toLocaleLowerCase' của null

Ống của tôi trông như thế này.

transform(value: QueuedTemplateDto[], filterBy: string): QueuedTemplateDto[] {
    filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
    return filterBy 
        ? value.filter((check: QueuedTemplateDto) => check.user.toLocaleLowerCase().indexOf(filterBy) !== -1) 
        : value;
}

Vì vậy, tôi đã thử thêm một câu lệnh if chỉ cho phép mã được thực thi nếu thuộc tính người dùng check.user không phải là null, tuy nhiên tôi nhận được lỗi mỗi khi cố gắng nhập điều này

Kiến thức JavaScript của tôi còn hạn chế về vấn đề này. Mọi sự giúp đỡ sẽ rất được trân trọng!

Câu trả lời #1

Bạn chỉ cần kiểm tra xem thuộc tính user có được định nghĩa hay không (null), vì vậy hãy thêm check.user !== null trước câu lệnh filter của bạn (để bỏ qua tất cả các giá trị falsy, chỉ cần sử dụng check.user).

transform(value: QueuedTemplateDto[], filterBy: string): QueuedTemplateDto[] {
filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
return filterBy ? value.filter((check: QueuedTemplateDto) =>
  check.user !== null && check.user.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;}
  //^^^^^^^^^^^^^^^^^^^^^ ----- here

Thông tin cho bạn: Bạn có thể thay đổi điều kiện theo yêu cầu của mình.

Câu trả lời số 2

Tận dụng các điều kiện trong Javascript để giảm mã của bạn:

transform(value: QueuedTemplateDto[], filterBy: string): QueuedTemplateDto[] {
  return filterBy && 
    value.filter(item => item && 
      item.user && 
      item.user.toLocaleLowerCase().indexOf(filterBy) !== -1) 
    || value;
}

Điều này là do các giá trị truthy/falsy, còn được gọi là tam vị nhất thể của Javascript.

Xem cách nó hoạt động :

const empty = '';
const undef = undefined;
const nul = null;
const defined = 'This is defined';
const zero = 0;

const data = ['This is data'];

console.log(empty && data || 'it is empty');
console.log(undef && data || 'it is undefined');
console.log(nul && data || 'it is null');
console.log(nul && data || 'it is equal to zero');
console.log(defined && data || 'You will not see this message');