Angular 如何以角度过滤数据？

我想要的是表中每个标题的输入。并且每个输入根据输入值过滤使用以下*（ngFor=“let bride of brides | async”）调用的数据

HTML

公元
索亚德
电传
阿迪斯
TÜR
卡兰
勒姆勒
{{bride.name}
{{新娘姓氏}
{{bride.phone}
{{新娘地址}
{{bride.type |大写}}
{{bride.remaining}₺

TS

从'@angular/core'导入{Component，OnInit}；
从“../../../services/brides/bride.service”导入{BrideService}”；
从“../../../services/brides/Bride”导入{Bride}”；
从“rxjs”导入{observeable}；
从'@angular/Router'导入{Router}；
@组成部分({
选择器：“应用程序新娘列表”，
templateUrl:“./bride list.component.html”，
样式URL:['./bride list.component.css']
})
导出类BrideListComponent实现OnInit{
新娘：可见；
建造师(
私人新娘服务：新娘服务，
专用路由器
) { }
ngOnInit（）：void{
此参数为.reloadData（）；
}
重新加载数据（）{
this.brides=this.brideService.getBrideList（）；
}
deleteBride（id:编号）{
this.brideService.deleteBride（id）
.订阅(
数据=>{
控制台日志（数据）；
此参数为.reloadData（）；
},
error=>console.log（错误））；
}
brideDetails（id:编号）{
this.router.navigate（['/details'，id]）；
}
新娘子（身份证号码）{
this.router.navigate（['/invoice'，id]）；
}
updateBride（id:number）{
this.router.navigate（['/update'，id]）；
}
}

我正在使用mongoDb提取数据。我正在使用NodeJs。

---

我想根据数据的属性筛选数据，但失败了。我是新来的，因为我有一个朋友。请帮忙。如果您希望我共享另一个文件，我将共享它请不要给出负号。

您当前是否显示了数据？因为我在模板和组件文件中没有看到对reloadData（）函数的调用。您的brides属性当前为空。尝试调用

ngOnInit中的
reloadData（）
函数

import { Component, OnInit } from '@angular/core';
import { BrideService } from "../../../services/brides/bride.service";
import { Bride } from "../../../services/brides/bride";
import { Observable } from "rxjs";
import { Router } from '@angular/router';


@Component({
  selector: 'app-bride-list',
  templateUrl: './bride-list.component.html',
  styleUrls: ['./bride-list.component.css']
})



export class BrideListComponent implements OnInit {

  // use the name$ notation for observable
  brides$: Observable<Bride[]>;


  constructor(
    private brideService: BrideService,
    private router: Router
  ) { }



  ngOnInit(): void {
    this.reloadData();
  }


  reloadData() {
    this.brides$ = this.brideService.getBrideList();
  }



  deleteBride(id: number) {
    this.brideService.deleteBride(id)
      .subscribe(
        data => {
        console.log(data);
    this.reloadData();
        },
    error => console.log(error));
  }

  brideDetails(id: number){
    this.router.navigate(['/details', id]);
  }

  brideInvoice(id: number){
    this.router.navigate(['/invoice', id]);
  }

  updateBride(id: number){
    this.router.navigate(['/update', id]);
  }
 }```

从'@angular/core'导入{Component，OnInit}；
从“../../../services/brides/bride.service”导入{BrideService}”；
从“../../../services/brides/Bride”导入{Bride}”；
从“rxjs”导入{observeable}；
从'@angular/Router'导入{Router}；
@组成部分({
选择器：“应用程序新娘列表”，
templateUrl:“./bride list.component.html”，
样式URL:['./bride list.component.css']
})
导出类BrideListComponent实现OnInit{
//使用名称$notation表示可观察的
新娘$：可见；
建造师(
私人新娘服务：新娘服务，
专用路由器
) { }
ngOnInit（）：void{
此参数为.reloadData（）；
}
重新加载数据（）{
this.brides$=this.brideService.getBrideList（）；
}
deleteBride（id:编号）{
this.brideService.deleteBride（id）
.订阅(
数据=>{
控制台日志（数据）；
此参数为.reloadData（）；
},
error=>console.log（错误））；
}
brideDetails（id:编号）{
this.router.navigate（['/details'，id]）；
}
新娘子（身份证号码）{
this.router.navigate（['/invoice'，id]）；
}
updateBride（id:number）{
this.router.navigate（['/update'，id]）；
}
}```
这不是AngularJs，而是有角度的。AngularJs是框架的v1。您当前正在使用v2+tahnx。我编辑