Angular中如何过滤数据？

Question

我想要的是表格中每个标题的输入。并且这些输入中的每一个都会根据输入值过滤使用以下 *(ngFor="let Brides | async") 调用的数据。

HTML

    <div class="limiter">
    <div class="container-table100">
        <div class="wrap-table100">
            <div class="table100">
                <table>
                    <thead>
                        <tr class="table100-head">
                            <th style="font-family: 'Teko', sans-serif; font-size: 30px;" class="column1">AD</th>
                            <th style="font-family: 'Teko', sans-serif; font-size: 30px;" class="column2">SOYAD</th>
                            <th style="font-family: 'Teko', sans-serif; font-size: 30px;" class="column3">TELEFON</th>
                            <th style="font-family: 'Teko', sans-serif; font-size: 30px;" class="column4">ADRES</th>
                            <th style="font-family: 'Teko', sans-serif; font-size: 30px;" class="column5">TÜR</th>
                            <th style="font-family: 'Teko', sans-serif; font-size: 30px;" class="column5">KALAN</th>
                            <th style="font-family: 'Teko', sans-serif; font-size: 30px;" class="column5">İŞLEMLER</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let bride of brides | async">
                            <td style="font-family: 'Open Sans Condensed', sans-serif; color: black; font-size: 25px;" class="column1">{{bride.name}}</td>
                            <td style="font-family: 'Open Sans Condensed', sans-serif; color: black; font-size: 25px;" class="column2">{{bride.surname}}</td>
                            <td style="font-family: 'Open Sans Condensed', sans-serif; color: black; font-size: 25px;" class="column3">{{bride.phone}}</td>
                            <td style="font-family: 'Open Sans Condensed', sans-serif; color: black; font-size: 25px;" class="column4">{{bride.adress}}</td>
                            <td style="font-family: 'Open Sans Condensed', sans-serif; color: black; font-size: 25px;" class="column5">{{bride.type | uppercase}}</td>
                            <td ng-controller="costCtrl" style="font-family: 'Open Sans Condensed', sans-serif; color: black; font-size: 25px;" class="column6">{{bride.remaining}} ₺</td>
                            <td style="font-family: 'Open Sans Condensed', sans-serif; color: black; font-size: 25px;" class="column7">

                                <button (click)="deleteBride(bride._id)"><img class="icon" src="../../../assets/img/delete.svg" alt=""></button>
                                <button (click)="updateBride(bride._id)" style="margin-left: 10px"><img class="icon" src="../../../assets/img/edit.svg" alt=""></button>
                                <button (click)="brideDetails(bride._id)" style="margin-left: 10px"><img class="icon" src="../../../assets/img/information.png" alt=""></button>
                                <button (click)="brideInvoice(bride._id)" style="margin-left: 10px;"><img class="icon" src="../../../assets/img/printer.svg"></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

TS

    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 {

      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]);
      }
     }

我正在使用 mongoDb 提取数据。我正在使用 NodeJs。 我想根据它们的属性过滤我的数据，但失败了。我是新来的，因为我有角。请帮忙。如果有其他文件要我分享，我会分享。 请不要给减号。

Answer 1

您目前是否有数据显示？因为我在您的模板和组件文件中没有看到对 reloadData() 函数的调用。您的新娘财产目前为null。尝试调用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]);
  }
 }```