Блог

Я создал настраиваемое окно поиска фильтра, оно работает нормально, но я не хочу отображать все данные заранее, скорее я хочу скрыть их от пользователя, пока пользователь не выполнит поиск. для него. Пожалуйста, подскажите мне, как мне этого добиться.

Здесь я делюсь своим кодом:

1. SearchFilter.pipe.ts

 import { Pipe, PipeTransform } from '@angular/core';
import { Pincodes } from '../classes/pincodes';

@Pipe({
  name: 'searchfilter'
})
export class SearchfilterPipe implements PipeTransform {

  transform(Pincodes: Pincodes[], searchValue: string): Pincodes[] {
    if (!Pincodes || !searchValue) {
      return Pincodes
    }
    return Pincodes.filter(pincode =>
      pincode.taluka.toLowerCase().includes(searchValue.toLowerCase()) ||
      pincode.village.toLowerCase().includes(searchValue.toLowerCase()) ||
      pincode.district.toLowerCase().includes(searchValue.toLowerCase()) ||
      pincode.pincode.toString().toLowerCase().includes(searchValue.toLowerCase())
    )
  }

}

 

2. регистрация-page.component.ts

 import { Component, OnInit } from '@angular/core';
import { Pincodes } from '../classes/pincodes';
import { MetaDataService } from '../services/meta-data.service';
import { FormBuilder, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith } from 'rxjs-compat/operator/startWith';
import { FormGroup } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'app-register-page',
  templateUrl: './register-page.component.html',
  styleUrls: ['./register-page.component.css']
})
export class RegisterPageComponent implements OnInit {
  observeData: Pincodes[]
  modifiedText: any;
  PinSelected: any = {}
  searchValue: string

  constructor(private _metaDataAPI: MetaDataService) {

  }

  ngOnInit() {
    this._metaDataAPI.getData().subscribe(data => {
      this.observeData = data;
    });

  }

  onPincodeSelected(val: Pincodes) {
    console.log("value"   val);
    this.customFunction(val)

  }
  customFunction(val: Pincodes) {
    // this.modifiedText = "The Selected Pin :  "   val.pincode  
    //  " and selected District is "   val.village
    this.modifiedText = "Selected Pin : "   val.pincode   "n"  
      "District : "   val.district   "n"  
      "Taluka : "   val.taluka


    console.log("Modified Text: "   this.modifiedText);
    console.log("Pincode Selected: "   this.PinSelected);
    console.log("observeData Selected: "   this.observeData);

  }


}

 

3. register-page.component.html

 <div class="wrapper">
  <div class="main_content">
    <div class="header">
      <strong><b>Tell us more about you</b></strong>
    </div>
    <div class="info">
      <h3>Basic Details</h3>


    <div class="form-group row col-md-4 mb-3">
      <label for="search" class="col-sm-2 col-form-label">Pincode*</label>
      <div class="col-sm-6">
        <input
          type="text"
          [(ngModel)]="searchValue"
          class="form-control"
          id="search"
        />
      </div>
    </div>
    <!-- Table started -->
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Pincode</th>
          <th scope="col">Village</th>
          <th scope="col">Taluka</th>
          <th scope="col">District</th>
          <th scope="col">State</th>
          <th scope="col">Tick</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let pin of observeData | searchfilter: searchValue">
          <td scope="col">{{ pin.pincode }}</td>
          <td scope="col">{{ pin.village }}</td>
          <td scope="col">{{ pin.taluka }}</td>
          <td scope="col">{{ pin.district }}</td>
          <td scope="col">{{ pin.state }}</td>
          <td scope="col">
            <mat-checkbox class="example-margin"></mat-checkbox>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

 

Как вы можете видеть, что он отображает все данные заранее, я хочу скрыть эти данные.

ИЗМЕНИТЕ СВОЙ КАНАЛ НА :-

 import { Pipe, PipeTransform } from '@angular/core';
import { Pincodes } from '../classes/pincodes';

@Pipe({
  name: 'searchfilter'
})
export class SearchfilterPipe implements PipeTransform {

  transform(Pincodes: Pincodes[], searchValue: string): Pincodes[] {
    if (!Pincodes || !searchValue) {
      return [];
    }
    return Pincodes.filter(pincode =>
      pincode.taluka.toLowerCase().includes(searchValue.toLowerCase()) ||
      pincode.village.toLowerCase().includes(searchValue.toLowerCase()) ||
      pincode.district.toLowerCase().includes(searchValue.toLowerCase()) ||
      pincode.pincode.toString().toLowerCase().includes(searchValue.toLowerCase())
    )
  }

}
 

мы в основном возвращаем пустой массив, если значение поиска или пинкоды отсутствуют.