Рубрики
Без рубрики

Фильтр в угловом с примером кода

Честно говоря, я не старший разработчик, но я хочу поделиться вещами, которые я изучаю. Надеюсь, … с меткой угловой, JavaScript, новичков, TypeScript.

Честно говоря, я не старший разработчик, но я хочу поделиться вещами, которые я изучаю. Надеюсь, это может быть полезно.

Если вы ищете ответ для этого вопроса «Как я могу фильтровать массив в angular », этот пост может вам помочь. Я собираюсь ответить примером:

У вас есть множество автомобилей:

cars: ICar[] = [
    {
      'carId': 1,
      'carName': 'Toyota',
      'carCode': 'CAR-0023',
      'releaseDate': 'March 18, 2019',
      'description': 'this is a description',
      'price': 35000,
      'starRating': 4.2,
      'imageUrl': 'https://images.unsplash.com/photo-1525609004556-c46c7d6cf023?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y2Fyc3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80'
    },
    {
      'carId': 2,
      'carName': 'Bugatti test',
      'carCode': 'CAR-1123',
      'releaseDate': 'March 18, 2020',
      'description': 'this is a description 2',
      'price': 48000,
      'starRating': 3.2,
      'imageUrl': 'https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg'
    },
    {
      'carId': 3,
      'carName': 'BMW test 2',
      'carCode': 'CAR-0030',
      'releaseDate': 'March 18, 2018',
      'description': 'this is a description 3',
      'price': 80000,
      'starRating': 5,
      'imageUrl': 'https://www.focus2move.com/wp-content/uploads/2021/02/Bugatti-Divo_Lady_Bug-2020-1024-0b.jpg'
    },
    {
      'carId': 4,
      'carName': 'Benz',
      'carCode': 'CAR-0190',
      'releaseDate': 'March 18, 2021',
      'description': 'A description',
      'price': 50000,
      'starRating': 4.5,
      'imageUrl': 'https://cdn.motor1.com/images/mgl/8e8Mo/s1/most-expensive-new-cars-ever.webp'
    }
  ]

Я знаю, что изображения не подходят с названием автомобиля.:)

Это в файле TS. Например, cars.component.ts

Теперь мы можем взглянуть на HTML -файл:


  

    {{title }}
  

  

    

      
 Filter By: 

      

        
      

      

        

          
 Filtered by

        

        

          

            
            

              
                
              
              Car Name
              Car Code
              Release Date
              Price
              5 Star Rating
            

            
            
            

              
                
              
              {{car.carName}}
              {{car.carCode}}
              {{car.releaseDate}}
              {{car.price}}
              {{car.starRating}}

Как вы видите, у нас есть вход, где пользователь может написать имя автомобиля, которое он/он хочет отфильтровать. Итак, здесь нам нужно, чтобы получить слово и передавать его в компонент, и для входных изменений и вызов функции, которую я назвал его фильтр()

filter(){
    if(this.filterTerm){
      this.filteredCars = this.cars.filter(car => car.carName.toLowerCase().includes(this.filterTerm.toLowerCase()))
    } else {
      this.filteredCars = this.cars
    }
}

Это переменные, которые мы должны объявить их в нашем файле TS. Фильтр термина – это такая строка, как фильтр «Toyota»:;

и FilteredCars – это массивы с типом ICAR. FilteredCars: ICAR [] = []

** ICAR – это интерфейс, который я создал для автомобилей:

export interface ICar {
  carId : number;
  carName : string;
  carCode : string;
  releaseDate : string;
  description : string;
  price : number;
  starRating : number;
  imageUrl : string;
}

Вы можете создать этот файл в папке, которую вы создали для автомобильных файлов. У меня это в папке Cars (компонент моих автомобилей)

Оригинал: “https://dev.to/tizhad/filter-in-angular-with-code-example-18g1”

Читайте ещё по теме: