如何使用管道在多个复选框和搜索字段上组织数据过滤？

我继续研究 Angular 6，但我遇到了一个事实，即我无法弄清楚如何使用管道在多个复选框和搜索字段上组织数据过滤。我阅读了很多论坛和课程，但我无法理解这个任务。

以下是代码的剪报：

我的组件：

import { Component, OnInit, Output } from '@angular/core';
import { AdminService } from '../admin.service';
import { Observable } from 'rxjs';

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

export class AppModuleComponent implements OnInit {
   public data: {
    services: [
      {
        id: number,
        name: string,
        url: string,
        connected: boolean,
        used: boolean,
        warning: boolean
      }

    ]
  };
  public services: any = [];
  constructor(private adminService: AdminService) { }


  ngOnInit() {
    this.getServicesList();
  }

  getServicesList() {
    this.adminService.getServices()
      .subscribe(data => {
        this.data = data;
        this.services = data.services;
      });
  }
}

我的服务：

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

@Injectable()
export class AdminService {
private API = 'http://localhost:3000';
constructor(
    private _http: HttpClient
) { }
getServices(): Observable<any> {
return this._http.get<any>(this.API + '/services');
}
}

我的组件.html

<div class="bg-gray wraper d-flex align-items-center justify-content-center">
  <div class="ui-card d-flex flex-column">
    <div>
      <strong>App Integration</strong>
    </div>
    <div class="search-box py-3">

      <form class="d-flex flex-row align-items-center">
        <input class="form-control form-search mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <input class="ui-checkbox" type="checkbox" value="" id="connected">
        <label class="form-check-label" for="connected">
          Connected
        </label>
        <input class="ui-checkbox" type="checkbox" value="" id="discovered">
        <label class="form-check-label" for="discovered">
          Discovered (not connected)
        </label>
        <input class="ui-checkbox" type="checkbox" value="" id="unused">
        <label class="form-check-label" for="unused">
          Unused
        </label>
      </form>


    </div>
    <div class="ui-services-box d-flex flex-wrap justify-content-between">
      <div *ngFor="let service of services"
      class="ui-service d-flex flex-wrap justify-content-between align-items-center"
      [ngClass]="{'brd-warning': service.warning}"
      [style.border-color]="!service.connected || !service.used ? '#9ea5b5':'#2bc339'"

      >
        <img src="{{service.url}}" alt="">
        <p>{{service.name}}</p>
        <div *ngIf="service.warning" ><i class="fa fa-exclamation-circle" aria-hidden="true"></i></div>
        <div *ngIf="!service.used" ><i class="fa fa-lock" aria-hidden="true"></i></div>
        <div
        class="button-green"
        *ngIf="service.used"
        [style.background-color]="service.connected === 0 ? '#9ea5b5': '#2bc339'">
          {{ service.connected ? "Connected" : "Connect" }}
        </div>
      </div>
    </div>
  </div>
</div>

我的数据：

services = [
{
id: 1,
    url: './assets/img/services/atlassian.png',
    name: 'Atlassian',
    connected: 1,
    used: 1,
    warning: 0 
},
{
    id: 2,
    url: './assets/img/services/google.png',
    name: 'Google G Suite',
    connected: 1,
    used: 1,
    warning: 1
 },
{
    id: 3,
    url: './assets/img/services/salesforce.svg',
    name: 'Salesforce',
    connected: 0,
    used: 1,
    warning: 1
 }
]

下面是一个截图，它显示页面上显示了所有服务，顶部有一个搜索字段和三个复选框，我希望服务列表按我在搜索字段中驱动的名称和复选框的值。