javascript - 如何更正搜索输入中的逻辑?角
问题描述
我的角度应用程序中有一个搜索输入,应该将输入数据与不同的对象属性进行比较
<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;
}
每个对象“订单”的结构如下
{
"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
}
您需要将“显示”属性设置为 false,以便隐藏那些不符合在搜索字段中输入的内容的人,让我看看我的错误在哪里。先感谢您
解决方案
我使用 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;
}
});
}
推荐阅读
- python - 在文本文件中搜索多行字符串并在 Python 中返回行号
- python - 使用 Popen 通信看到乱码输出
- c++ - C ++试图将类传递给另一个类的构造函数
- matplotlib - Matplotlib:带有log base 2 colorbar的奇怪小刻度
- django - django + aws 用于物联网记录和数据渲染
- c - SSL_set_connect_state 和 SSL_connect 之间的区别
- r - 需要帮助了解“rep()”函数
- pandas - groupby(多列)Pandas的标准差
- python - 使用pycharm调试python编写的自定义GNU Radio块工作函数
- wordpress - Wordpress 主题使用已删除的图像