Angular 如何从特定的搜索框中筛选数据，而不是使用

我有一组数据，每个数据都有单独的搜索框，现在如果我在一个搜索框中输入，它将带到所有搜索框。所以我需要过滤特定搜索框中的数据

HTML:

{{item.level_name}

{{item2.name}

---

演示：

问题似乎是您的[（ngModel）]对于每个文本框都设置为相同的变量query。因为当您更改一个文本框时，每个文本框都绑定了相同的变量，所以您可以更改所有文本框。您需要创建一个与数据数组大小相同的查询变量数组，或者向数据数组中的每个对象追加一个查询变量，以便每个元素都可以有一个单独的查询

在您的演示中，您有如下数据

数据=[
{
“级别id”：7，
“价值观”：[
{
“客户标识”：“R”，
“isAssigned”：1，
“id”：40，
“名称”：“站点-43”
},
{
“客户标识”：“R”，
“isAssigned”：1，
“id”：41，
“名称”：“Site-83”
},
{
“客户标识”：“R”，
“isAssigned”：1，
“id”：42，
“名称”：“站点-84”
}
],
“级别名称”：“站点”
},
{
“级别id”：8，
“价值观”：[
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：43，
“名称”：“技术1”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：44，
“名称”：“技术2”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：45，
“名称”：“技术3”
}
],
“级别名称”：“技术”
},
{
“级别id”：9，
“价值观”：[
{
“客户标识”：“R”，
“isAssigned”：1，
“id”：46，
“名称”：“半成品”
}
],
“级别名称”：“估价类别”
},
{
“级别id”：10，
“价值观”：[
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：47，
“名称”：“MN-1657106”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：48，
“名称”：“MN-1149527”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：49，
“名称”：“MN-1782715”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：50，
“名称”：“MN-622060”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：51，
“名称”：“MN-1111461”
}
],
“级别名称”：“产品”
},
{
“级别id”：11，
“价值观”：[
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：52，
“名称”：“第130_83行”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：53，
“名称”：“第301_83行”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：54，
“名称”：“第370_43行”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：55，
“名称”：“第245_84行”
}
],
“级别名称”：“行”
},
{
“级别id”：12，
“价值观”：[
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：56，
“名称”：“资源-617”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：57，
“名称”：“资源-369”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：58，
“名称”：“资源-204”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：59，
“名称”：“资源-207”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：60，
“名称”：“资源-370”
},
{
“客户标识”：“R”，
“isAssigned”：0，
“id”：61，
“名称”：“资源-500”
}
]
}
]

如果像这样向这些对象中的每一个添加查询

数据=[
{
“级别id”：7，
“查询”：“”，
“价值观”：[
{
“客户标识”：“R”，
“isAssigned”：1，
“id”：40，
“名称”：“站点-43”
},...
]

---

现在将您的[（ngModel）]表单查询更改为item.query，并将您的ngFor更改为下面的item.query以使用item.query而不是query。您应该能够获得单独的查询字符串。

感谢您的回复，您能给我这样的示例吗

<div *ngFor="let item of data">
<p>{{item.level_name}}</p>
<input matInput type="text" id="" name="item" value="" placeholder="Search" [(ngModel)]="item.query">
<div *ngFor="let item2 of item.values | search:'id,name':item.query">
    <p>{{item2.name}}</p>
</div>

<div *ngFor="let item of data">
<p>{{item.level_name}}</p>
<input matInput type="text" id="" name="item" value="" placeholder="Search" [(ngModel)]="item.query">
<div *ngFor="let item2 of item.values | search:'id,name':item.query">
    <p>{{item2.name}}</p>
</div>

{
  "level_id": 10,
  "query":"",
  "values": [...]}