Angular 管道不在 HTML 表格中显示数据

Question

我正在尝试创建一个过滤数据的 Angular 管道。用户在搜索查询中键入 municipality，然后管道应仅过滤数组中具有匹配键值对 municipality 的那些对象。

我尝试创建一个export 到app.module.ts，但这个技巧没有奏效。

app.component.html:

<div class="container">
  <h1>Automatic Teller Machines</h1>

  <div class="row form-group">
    <div class="col">
      <input class="form-control" type="text" [(ngModel)]="municipality" placeholder="Municipality">
    </div>
  </div>    

  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Address</th>
        <th>Location</th>
        <th>Availability</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let atm of atms | search:municipality">
        <td>{{ atm.target_address }}, {{ atm.postalnumber }}
          {{ atm.municipality }}</td>
        <td>{{ atm.location }}, {{ atm.location_type }}</td>
        <td>{{ atm.availability }} {{ atm.availability_details }}</td>
      </tr>
    </tbody>
  </table>    
</div>

app.component.ts：

import { Component } from '@angular/core';
import { ATMsService } from '../app/atms.service';

interface atm {
    target_address: string,
    postalnumber: string,
    municipality: string,
    location: string,
    location_type: string,
    availability: string,
    availability_details: string,
    coordinates_lat: string,
    coordinates_lon: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  municipality: string;
  atms: atm[] = [];

  constructor(public service: ATMsService) { }

  searchByMunicipalityName = (municipality: string) => {
    this.service.searchByMunicipalityName(municipality).then((data) => {
      this.atms = data;
    })
  }

}

search.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';

interface atm {
    target_address: string,
    postalnumber: string,
    municipality: string,
    location: string,
    location_type: string,
    availability: string,
    availability_details: string,
    coordinates_lat: string,
    coordinates_lon: string
}

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(atms: atm[], municipality: string): any {
    let filteredAtms: atm[] = [];

    if (municipality) {
      filteredAtms= atms.filter(o => o.municipality== municipality.toUpperCase());
    } else {
      filteredAtms= atms;
    }
    return filteredAtms;
  }

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { OttoautomaatitService } from '../app/ottoautomaatit.service';
import { SivutusPipe } from './sivutus.pipe';
import { HakuPipe } from './haku.pipe';

app.module.ts:

    @NgModule({
      declarations: [
        AppComponent,
        SearchPipe
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule
      ],
      providers: [ATMsService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

我希望能够从包含对象数组的 JSON 文件中过滤掉数据，但是当我输入搜索查询 municipality 时，什么都没有发生。在应该有一个包含最终过滤数据的 HTML 表的地方，什么都没有出现。

Answer 1

从您提供的代码中，我了解到函数 searchByMunicipalityName 假设填充 atms 数组。但它永远不会在任何地方被调用。我推测如果您将 app 组件构造函数 更改为

constructor(public service: ATMsService) {
    this.searchByMunicipalityName('');
}

可能会解决您的问题。