如何更正搜索输入中的逻辑？ Angular

Question

我的 angular 应用程序中有一个搜索输入，应该将输入数据与不同的对象属性进行比较

        <div class="forms">
          <div class="search-wrapper">
            <input
            class="search"
            [ngClass]="{'searching': searching}"
            type="text"
            (input)="changeSearch($event.target.value)"
            />
            <label class="">
              <span>Rechercher</span>
            </label>
          </div>
        </div>

我使用的逻辑如下

    public changeSearch(searchTerm: string) {

        this.searching = !!searchTerm;

        if (!this.searching) {

            this.orders.forEach(order => {
                order.show = true;
            });
            return;
        }

        const extendSearchIn = ['order_number', 'transaction.item.product.name'];

        this.orders.forEach(order => {
            order.show = true;
            extendSearchIn.forEach(property => {
                this.searchByProperty(order, property, searchTerm);
            });
        });
    }

    public searchByProperty(order, property, searchTerm) {

        const prop = this.getSearchProperty(order, property);
        if (prop === undefined) { return false; }
        return (<String>prop.toLowerCase()).startsWith(searchTerm.toLowerCase());

    }

    public getSearchProperty(item: object, property: string) {

        let itemCopy = Object.assign({}, item);
        let result: any;
        const props = property.split('.');
        props.forEach(prop => {

          if (itemCopy !== undefined) {
            itemCopy = itemCopy[prop];
          }

        });

        result = itemCopy !== undefined ? itemCopy : result;
        return result;

      }

每个对象的结构'order'如下

{
  "functional_id": "202006101058160012400000SD4AYAA1",
  "transactions": [
    {
      "quantity": 2,
      "price": 140,
      "item": {
        "name": "Carton",
        "description": "+ 2 recharges",
        "product": {
          "name": "Coffret rouge"
        }
      },
      "amount": 280
    },
    {
      "quantity": 2,
      "price": 140,
      "item": {
        "name": "10 coffrets",
        "description": "+ 2 recharges",
        "product": {
          "name": "Coffret gris"
        }
      },
      "amount": 280
    },
    {
      "quantity": 2,
      "price": 60,
      "item": {
        "name": "PACK N°1 comprenant :",
        "description": "6 modèles",
        "product": {
          "name": "AfuBOX",
          "description": "60,8 x 39,5 x 16,5 cm"
        }
      },
      "amount": 120
    }
  ],
  "show": true,
  "date": "10/06/2020",
  "order_number": "105816",
  "overallAmount": 680
}

您需要将 'show' 属性设置为 false，以便隐藏那些不符合搜索字段中输入内容的内容有人让我看看我的错误在哪里。提前谢谢你

Answer 1

我使用 forEach 简化了逻辑，并检查我从输入中收到的值是否包含我想要应用的任何搜索条件。如果您发现自己处于类似情况，我希望这能帮助您解释。

    public changeSearch(searchTerm: string) {

        this.searching = !!searchTerm;

        if (!this.searching) {

            this.orders.forEach(order => {
                order.show = true;
            });
            return;
        }

        this.orders.forEach(order => {
            order.show = true;
            this.searchByProperty(order, searchTerm);
        });
    }

    public searchByProperty(order, searchTerm) {

        const id = (order.order_number + '');
        const amount = (order.overallAmount + '');

        order.transactions.forEach(items => {
            const title = items.item.product.name.toLowerCase();
            if (title.includes(searchTerm) || id.includes(searchTerm) || amount.includes(searchTerm)) {
                order.show = true;
            } else {
                order.show = false;
            }
        });
    }

如何更正搜索输入中的逻辑？ Angular

How to correct logic in a search input? Angular

javascript

search

input

object

angular7