通过filter方法呈现html组件

Question

我正在尝试渲染我的表数据，以便在搜索特定标题时，显示匹配它的唯一标题（搜索按标题完成）

HTML组件

<button type="button" mdbBtn color="primary" mdbWavesEffect 
[routerLink]="['new']">New Products</button>

<form class="form-inline md-form form-sm active-pink-5" 
(ngSubmit)="onsubmit()"  #f="ngForm">

<div class="md-form form-group mt-12">
<input mdbInputDirective type="text" class="form-control" 
id="formGroupExampleInputMD" placeholder="Search"
name="search" required ngModel #search="ngModel">

<button type="submit" mdbBtn color="primary" style="position: 
absolute; left: -9999px" mdbWavesEffect>Search</button>

</div>
</form>
<table mdbTable>
<thead>
  <tr>
    <th *ngFor="let head of headElements" scope="col">{{head}} </th>
  </tr>
</thead>
<tbody>
  <tr mdbTableCol *ngFor="let el of listofproducts;let id=index">
      <td>{{id}}</td>
    <td >{{el.title}}</td>
    <td>{{el.price}}</td>
    <td class="edit" (click)="onclickedit(id)">Edit</td>

  </tr>
</tbody>
</table>

所以在这里我想只显示那些与serach框中输入的值匹配的表数据（搜索是根据标题完成的）

.ts组件

import { Component, OnInit, ViewChild } from '@angular/core';
import { Productservice } from 'src/app/shared/product.service';
import { ActivatedRoute, Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { Items } from 'src/app/shared/items.modal';

@Component({
selector: 'app-admin-products',
templateUrl: './admin-products.component.html',
styleUrls: ['./admin-products.component.scss']
})
export class AdminProductsComponent implements OnInit {
constructor(private prservice:Productservice,private 
route:ActivatedRoute,private router:Router) { }

listofproducts
productreceived
headElements = ['S.No' ,'Title', 'Price'];


ngOnInit() {
 this.listofproducts=this.prservice.getallproducts()

 }

itemlist
 @ViewChild('f') searchform:NgForm



onsubmit(){
let search=this.searchform.value
this.itemlist=this.prservice.getallproducts()
 let  titles=this.itemlist.map(i=>i.title);


let found2 = titles.filter(title => title.includes(search.search))


console.log(found2)

}


}

我现在能够在控制台中控制记录我想要的结果如何在我的html组件中实现这个？

Answer 1

您正在实施的简单标题搜索的简单解决方案是更改您绑定在* ngFor上的列表，在您的情况下listofproducts。但是当你删除搜索时，它不会还原你所拥有的旧搜索，所以你应该做的是创建另一个变量，默认情况下与listofproducts具有相同的值，但是当你提交文本过滤器时，你将变量更改为过滤器示例：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Productservice } from 'src/app/shared/product.service';
import { ActivatedRoute, Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { Items } from 'src/app/shared/items.modal';

@Component({
selector: 'app-admin-products',
templateUrl: './admin-products.component.html',
styleUrls: ['./admin-products.component.scss']
})
export class AdminProductsComponent implements OnInit {
constructor(private prservice:Productservice,private 
route:ActivatedRoute,private router:Router) { }

listofproducts
filteredproducts
productreceived
headElements = ['S.No' ,'Title', 'Price'];


ngOnInit() {
 this.listofproducts=this.prservice.getallproducts();
 this.filteredproducts = this.listofproducts;
 }

itemlist
 @ViewChild('f') searchform:NgForm



onsubmit(){
let search=this.searchform.value
this.itemlist=this.prservice.getallproducts()
 let  titles=this.itemlist.map(i=>i.title);


this.filteredproducts = titles.filter(title => title.includes(search.search))

}


}

然后在html上更改'过滤产品'的'listofproducts'，当您想要删除文本过滤器时，只需将过滤后的产品值更改回listofproducts