Tarun Surana Ответов: 0

Где я застрял, чтобы реализовать фильтр?

это html-компонент
<div class="container countries-box">
  <a class="btn btn-dark"> Go Back</a>
    <div class=" text-center row">
    <div class="col-12">
      <h1 class="page-title">America<br>Countries</h1>
    </div>
    <div class="col-12">
      <ul class=" text-center link-button-bar">
        <li class="link-item"><a class="link">America Countries</a></li>        <li class="link-item"><a class="link">Europe Countries</a></li>        <li class="link-item"><a class="link">Africa Countries</a></li>        <li class="link-item"><a class="link">Asia Countries</a></li>        <li class="link-item"><a class="link">Oceania Countries</a></li>      </ul>
    </div>
  </div>
  <div class="row">
      <div class="form-group col-12">
            
      </div>
  </div>
  <div class="row">
      <div class="col-lg-4">
        <div class="card">
          
          <div class="card-body">
            <h5 class="card-title">{{country.name}}</h5>
          </div>
          <ul>
            <li>Region:-{{country.region}}</li>            <li>SubRegion:-{{country.subregion}}</li>            <li>Area:-{{country.area}}</li>            <li>Capital:-{{country.capital}}</li>            <li>Population:-{{country.population}}</li>            <li>Currency:-{{country.currencies}}</li>          </ul>
          <a class="btn btn-primary text-center">Show More</a>
      </div>
  </div>
</div>

это компонент typescript
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core'; 

import { Observable } from 'rxjs';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';

@Component({
  selector: 'app-america-countries',
  templateUrl: './america-countries.component.html',
  styleUrls: ['./america-countries.component.css']
})
export class AmericaCountriesComponent implements OnInit {

  americascountries : any;
  searchCountry: string = "";

  public ApiUrl = "https://restcountries.eu/rest/v2/region";
   
  constructor(private _http: HttpClient) {
    console.log("America Countries http Constructor Called");
  }

  ngOnInit() {
    let response = this._http.get(this.ApiUrl+ '/americas');
    response.subscribe((data)=>this.americascountries = data);
    console.log(response);
  }

}

filter.pipe.ts file

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: any, SCountry: string) {
    if(SCountry === "") {
      return value;
    }
    const allcountriesArray: any[] = [];
    for(let i = 0; i <= value.length; i++) {
      let countryName: string = value[i].name; 
      if(countryName.startsWith(SCountry)) {
        allcountriesArray.push(value[i]);
      }
    }
    return allcountriesArray;
  }

}
В этом коде фильтра не работает, пока я пишу название страны в поле поиска, но не фильтрую данные в соответствии с моим воображением.

Что я уже пробовал:

На странице americascountries я попытался вручную написать название страны в поле поиска фильтра pipe filter that countries.

0 Ответов