javascript - 如何将我的角度项目插入过滤器？

Question

我正在做一个 Angular 项目，我需要一个过滤器的可能性。我怎样才能最好地处理过滤器？

我尝试了 filter.pipe 但我对管道不太了解。

客户输入.component.ts

import { Component, Output, EventEmitter } from "@angular/core";
import { Customer, CustomerService } from "./services";

@Component({
  selector: "app-customer-input",
  template: `
    <form *ngIf="customer" novalidate #form="ngForm">
      <h2>{{ customer.id ? "Bearbeite Kunde" : "Füge Kunden hinzu" }} ...</h2>
      <p *ngIf="customer.id">
        <label for="id">ID:</label>
        <input type="number" [value]="customer.id" id="id" name="id" readonly />
      </p>
      <p>
        <label for="title">Vorname:</label>
        <input
          [(ngModel)]="customer.firstName"
          id="firstName"
          name="firstName"
          required
          minlength="2"
        />
      </p>
      <p>
        <label for="title">Nachname:</label>
        <input
          [(ngModel)]="customer.lastName"
          id="lastName"
          name="lastName"
          required
          minlength="2"
        />
      </p>
      <p>
        <label for="birthDate">Geburtstag:</label>
        <input
          [(ngModel)]="customer.birthDate"
          id="birthDate"
          type="date"
          name="birthDate"
          value="{{ customer.birthDate }}"
          required
        />
      </p>
      <p>
        <label for="active">Aktiviert:</label>
        <input
          [(ngModel)]="customer.active"
          id="active"
          type="checkbox"
          name="active"
        />
      </p>
      <p>
        <button
          *ngIf="form.valid"
          (click)="finishWithOk()"
          class="btn btn-success"
        >
          Ok
        </button>
        <button (click)="finishWithCancel()" class="btn btn-danger">
          Abbrechen
        </button>
      </p>
    </form>
  `,
  styles: [
    `
      * {
        margin: 0;
        padding: 0;
      }

      button,
      input,
      textarea {
        margin: 5px;
      }

      form {
        margin-top: 10px;
      }

      h2 {
        margin: 10px 0;
      }

      label {
        display: inline-block;
        vertical-align: top;
        width: 100px;
      }
    `
  ]
})
export class CustomerInputComponent {
  @Output() ok = new EventEmitter<Customer>();
  @Output() cancel = new EventEmitter();
  customer: Customer;

  constructor(private customerService: CustomerService) { }

  startAddingCustomer() {
    console.log("start adding", this.customer);
    this.customer = new Customer();
  }

  startEditingCustomer(id: number) {
    console.log("start editing");
    this.customerService.retrieve(id).then(customer => (this.customer = customer));
  }

  setBirthDate() {
    console.log("bday");
    this.customer.birthDate = new Date();
  }

  finishWithOk() {
    console.log("finishing");
    this.createOrUpdate().then(() => {
      this.ok.emit(this.customer);
      this.customer = null;
    });
  }

  finishWithCancel() {
    this.cancel.emit();
    this.customer = null;
  }

  createOrUpdate() {
    if (this.customer.id) {
      return this.customerService.update(this.customer);
    } else {
      return this.customerService.create(this.customer);
    }
  }
}

客户列表.component.ts

import { CustomerService, Customer } from "./services";
import { Component, OnInit, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "app-customer-list",
  template: `
    <table>
      <thead>
        <tr>
          <th>Suchen:</th>
          <th>
            <input type="text" [(ngModel)]="filteredStatus" />
          </th>
          <th>Filtert nach: {{ filteredStatus }}</th>
        </tr>
        <tr>
          <th>ID</th>
          <th>Vorname</th>
          <th>Nachname</th>
          <th>Geburtsdatum</th>
          <th>Aktiviert</th>
          <th>
            <button (click)="addCustomer()" class="btn btn-success">
              Kunden hinzufügen
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let customer of customerList">
          <td>{{ customer.id }}</td>
          <td>{{ customer.firstName }}</td>
          <td>{{ customer.lastName }}</td>
          <td>{{ customer.birthDate }}</td>
          <td>{{ customer.active }}</td>
          <td>
            <button (click)="editCustomer(customer)">
              <img src="assets/edit.gif" />
            </button>
            <button (click)="deleteCustomer(customer)">
              <img src="assets/delete.gif" />
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  `,
  styles: [
    `
      * {
        margin: 0;
        padding: 0;
      }

      button {
        margin: 5px;
      }

      td {
        text-align: left;
      }

      td:first-of-type {
        text-align: right;
      }

      td,
      th {
        border: 1px solid black;
        padding: 5px;
      }

      th {
        text-align: center;
      }
    `
  ]
})
export class CustomerListComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  customerList: Customer[];
  filteredStatus = "";

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    this.refresh();
  }

  refresh() {
    this.customerService.retrieveAll().then(customerList => {
      this.customerList = customerList;
      console.log(this.customerList);
    });
  }

  private addCustomer() {
    this.add.emit();
  }

  private editCustomer(customer: Customer) {
    console.log(customer);
    this.edit.emit(customer.id);
  }

  private deleteCustomer(customer: Customer) {
    if (confirm("Wollen Sie die News wirklich löschen?")) {
      this.customerService.delete(customer.id).then(() => this.refresh());
    }
  }
}

客户.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-news",
  template: `

    <h1>Kunden Management</h1>
    <app-customer-list #list (add)="input.startAddingCustomer()" (edit)="input.startEditingCustomer($event)"></app-customer-list>
    <app-customer-input #input (ok)="list.refresh()"></app-customer-input>

  `,
  styles: [
    `
      * {
        margin: 0;
        padding: 0;
      }

      h1 {
        margin: 10px 0;
      }
    `
  ]
})
export class NewsComponent { }

过滤器.pipe.ts

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

@Pipe({
  name: "filter"
})
// export class Filter implements PipeTransform {
//   transform(value: string, chracter: string): string {
//     return value.replace(chracter, " ");
//   }
// }
export class FilterPipe implements PipeTransform {
  transform(value: any, filterString: string, propName: string): any {
    if (value.length === 0 || filterString === "") {
      return value;
    }
    const resultArray = [];
    for (const item of value) {
      if (item[propName] === filterString) {
        resultArray.push(item);
      }
    }
    return resultArray;
  }
}

服务.ts

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

export class Customer {
  id: number;
  firstName: string;
  lastName: string;
  birthDate: Date;
  active: boolean = false;
}

const NEWS_RESOURCE_URL = "http://localhost:8080/news/resources/news";

@Injectable({
  providedIn: 'root',
})
export class CustomerService {
  constructor(private httpClient: HttpClient) { }

  create(customer: Customer): Promise<any> {
    return this.httpClient.post(NEWS_RESOURCE_URL, customer).toPromise();
  }

  retrieve(id: number): Promise<Customer> {
    return this.httpClient.get<Customer>(NEWS_RESOURCE_URL + '/' + id).toPromise();
  }

  update(customer: Customer): Promise<any> {
    return this.httpClient.put(NEWS_RESOURCE_URL + '/' + customer.id, customer).toPromise();
  }

  delete(id: number): Promise<any> {
    return this.httpClient.delete(NEWS_RESOURCE_URL + '/' + id).toPromise();
  }

  retrieveAll(): Promise<Customer[]> {
    return this.httpClient.get<Customer[]>(NEWS_RESOURCE_URL).toPromise();
  }
}

我需要一个简单的过滤器。如果你输入一些东西然后结果来了

标签： javascriptangulartypescriptfilter