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>

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

.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具有相同的值，但是当您提交文本过滤器时，请将变量更改为过滤器示例：

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上将“ filteredproducts”更改为“ listofproducts”，当您要删除文本过滤器时，只需将filteredproducts值更改回listofproducts

通过filter方法呈现html组件

1 个答案: