Я реализовал шаблон angular и показываю итеративные данные в div через * ngFor. И я хочу найти конкретный элемент. Я пытаюсь использовать фильтр, но у меня он не работает. Возможно, я показываю данные через вызов API, поэтому поиск не работает. Я новичок в Angular 2.

API: https: //rickandmortyapi.com/api/character/

app.component.ts

import { Component,OnInit  } from '@angular/core';
import { ApiService } from './api.service';
import { DatePipe} from './date.pipe';

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

export class AppComponent {
  title = 'demo';
  searchText;
  constructor(private apiService: ApiService){}
  ngOnInit(){
    this.apiService.apiCall().subscribe((data)=>{
      console.warn("get",data.results);
      this.data=data;     
    })
  }

}

app.component.html

 <div class="row">
    <div class="col-md-3" style="background-color: black;" *ngFor="let data of data.results">
      <div class="col-md-12 " style="background-color:rgba(125, 123, 123, 0.83);padding:0px;margin-top:20px;">
        <div class="text-image">
          <img [src]="data.image" class="img-fluid" style="border-radius: 5px 5px 5px 5px;">
          <div class="bottom-left text-left" style="background-color: #0c0c0c;padding:13px;">
            <div>{{data.name}}</div>
            <div style="font-size:12px">
              <span>id: {{data.id}} </span> -  <span>  created 
                {{data.created | DateFilter}} years ago</span>
            </div>            
          </div>
        </div>
        <table style="font-size: 11px;">
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>STATUS</strong></td>
            <td style="color: #ea8c2a;"><strong>{{data.status}}</strong></td>
          </tr>
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>SPECIES</strong></td>
            <td style="color: #ea8c2a;"><strong>{{data.species}}</strong></td>
          </tr>
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>GENDER</strong></td>
            <td style="color: #ea8c2a;"><strong>{{data.gender}}</strong></td>
          </tr>
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>ORIGIN</strong></td>
            <td style="color: #ea8c2a;"><strong>{{data.origin.name}}</strong></td>
          </tr>
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>lOCATION</strong> </td>
            <td style="color: #ea8c2a;"><strong>{{data.location.name}}</strong></td>
          </tr>
        </table>
      </div>
    </div>
  </div>

< Сильный > api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private httpClient: HttpClient) {}
  apiCall(){
      return this.httpClient.get('https://rickandmortyapi.com/api/character/');
  }
}

S tyle.css

table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  .text-image {
    position: relative;
    text-align: center;
    color: white;
  }
  
  .bottom-left {
    position: absolute;
    bottom: 0px;
    opacity: 0.8;
    width:100%
    
  }

Предположим, я буду искать по имени, тогда должен появиться только конкретный div.

Я проверил эту ссылку, но она не работает: Фильтр / список поиска Angular 2

2
Varun Sharma 19 Июл 2020 в 10:37

1 ответ

Лучший ответ

Это Демо

Вы можете решить с помощью трубы

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

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

 
 public transform(value: any[], filterText: string) {

    return filterText.length>3 ? value.filter(x=> x.name.toLowerCase().includes(filterText.toLowerCase())): value
  }
}
0
pc_coder 19 Июл 2020 в 08:08