在 Angular 中搜索嵌套数据

Question

我正在尝试一起搜索 fname、mname 和 lname。现在，我只能按 fname、mname 和 lname 搜索，但不能一起搜索。

示例：我正在尝试搜索“Jacob jj9eqwif Nguyen”，但它不起作用。但是尝试搜索 Jacob 并且它有效。尝试搜索 jj9eqif 并且它有效。尝试搜索 Nguyen 即可。

请看这个链接

CLICK HERE

     search(event) {
        const val = event.target.value.toLowerCase();

        if (!val) {
          this.data = this.tempData;
        }

        const temp = this.tempData.filter(row => {
          return Object.keys(row).some(property => {
            if (property === 'received_by') {
              return row[property].fname
                .toString()
                .toLowerCase()
                .indexOf(val) !== -1
                ? row[property].fname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                : row[property].mname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                ? row[property].mname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                : row[property].lname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                ? row[property].lname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                : (row[property].fname + row[property].lname + row[property].mname)
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1;
            }
            if (property === 'warehouse') {
              return (
                row[property].name
                  .toString()
                  .toLowerCase()
                  .indexOf(val) !== -1
              );
            } else {
              return row[property] === null
                ? null
                : row[property]
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1;
            }
          });
        });

        this.data = temp;
      }

Answer 1

您正在搜索 fname、mname、lname 的代码中存在拼写错误，但您连接了字符串 fname+lname+mname，但 lname 应该在最后一个位置，因此请更改

(row[property].fname + row[property].lname + row[property].mname)
                .toString()
                .toLowerCase()
                .indexOf(val) !== -1;

到

(row[property].fname + row[property].mname + row[property].lname)
                .toString()
                .toLowerCase()
                .indexOf(val) !== -1;

另外如果你想搜索条件可以更简单，如果你在这里不使用三元运算符 exmp

row[property].fname.toString()
            .toLowerCase().includes(val)
           || row[property].mname.toString()
                .toLowerCase().includes(val)|| row[property].lname
                .toString().toLowerCase().includes(val) || (row[property].fname + row[property].mname + row[property].lname)
                .toString()
                .toLowerCase()
                .includes(val);

正如@Sangram Nandkhile 指出的那样考虑fname、mname 和lname 之间的空格。您的条件应该是

(row[property].fname +' '+ row[property].mname +' ' row[property].lname)

Demo

Answer 2

让我们从您的代码开始，

您在filter 函数中使用了Object.key(row)，那么您只检查2 个固定属性； recieved_by 和 warehouse，因此您可以获取对象键并遍历它们，这会消耗不必要的过程。

另外，您使用了多个ternary 运算符；这会令人困惑，但您只需要使用||（或）运算符。

这是我的解决方案：

const temp = this.tempData.filter(row => {
  return (
    row.warehouse.name.toLowerCase().indexOf(val) !== -1 ||
    (
      row.received_by.fname + ' ' +
      row.received_by.mname + ' ' +
      row.received_by.lname
    ).toLowerCase().indexOf(val) !== -1
  );
});

但它在search 函数中，它应该可以正常工作。

检查DEMO。

Answer 3

连接您要搜索的字符串，并在连接的字符串中查找搜索到的值。

let temp = this.tempData.filter(data => {
    let combinedData = (data.received_by.fname + " " + data.received_by.mname + " " + data.received_by.lname + " " + data.warehouse.name).toLowerCase();
    return combinedData.indexOf(val) >= 0;
}

如果有更多列并且您想要搜索所有列，您可以使用 JSON.stringify 将整个数据转换为字符串并在该字符串中搜索。

let temp = this.tempData.filter(data => {
    let combinedData = JSON.stringify(data).toLowerCase();
    return combinedData.indexOf(val) >= 0;
});

我在这里修改了你的 fork - https://stackblitz.com/edit/filter-multiple-wujuvz