angular - 通过 filter 方法渲染 html 组件
问题描述
我正在尝试呈现我的表格数据,以便在搜索特定标题时显示唯一匹配它的标题(搜索是按标题完成的)
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 组件中实现它?
解决方案
您正在实施的简单标题搜索的一个简单解决方案是更改您在 *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' 更改为 'filteredproducts',当您想要删除文本过滤器时,只需将 filteredproducts 值更改回 listofproducts
推荐阅读
- python - Python通过装饰器将参数传递给函数
- date - Gnuplot:午夜次x轴的日期
- nginx - kubectl 端口转发不适用于 EC2 实例
- javascript - 如何使用一个函数导致另一个带有异步等待的函数
- three.js - 三.js“.getWorldPosition() 目标现在是必需的”错误信息
- python - 如何将 cursor.fetchall() 转换为 python 数据框
- python - 需要解析一个xml文件并构造一个excel工作簿
- java - 我在哪里可以看到我在谷歌云平台的java应用程序中编写的应用程序日志?
- html - 角度映射函数
- string - 通过正则表达式拆分字符串以获得 Vec