Question

我继续研究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');
}
}

我的component.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
 }
]

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

Answer 1

按照屏幕截图，您应该创建一个管道。你可以这样使用它：

<input type="text" [(ngModel)]="query">
<div *ngFor="let provider of providers | fullSearch:query:'name'">

在你的烟斗中

transform(items: any[], query: string, property: string) {
  return items.filter(item => item[property].includes(query));
}

对不起，我无法提供适合您的案例或文档的代码，但是现在我正在打电话，这根本不方便。要么明天通知我，要么自己找文件！

Answer 2

您的意思是，您需要根据您在搜索中输入的内容进行过滤吗？对不起，我还不能发表评论。

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

2 个答案: