Question

我的页面分为三个部分

<nav></nav>
<form></form>
<listing></listing>

页面加载时，它会抓取默认数据并列出所有项目。如何创建过滤器，当您在表单中输入文本时，它会过滤列表组件中的项目，如果有数据显示则会显示错误消息。我的表单正在努力获取搜索值。但我不知道如何使用管道为其提供搜索文本，然后过滤列表中的项目。我不确定表格，管道和列表是如何进行通信的。如果还有另一种更简单的方法，那么也可以这样做。这是我的代码。

form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  filter(form: any): void {
    console.log('you submitted value:', form);
    console.log(form.committee)
  }

}

form.component.html

  <form #filters="ngForm" (ngSubmit)="filter(filters.value)">
  <div class="grid-half">
    <div class="col-md-12 margin-right-sm">
      <div class="input-list">
        <div class="input-unit">
          <label for="tag-name" class="input-label">Tag Name</label>
          <div class="input-control">
            <input type="text" id="tag-name" name="tagname" class="input-element input-element" ngModel>
          </div>
        </div>
      </div>
    </div>
  <div class="panel-footer">
    <div class="panel-buttons">
      <button class="btn btn-gray">Remember Filters</button>
      <button class="btn btn-blue" type="submit">Refresh Results</button>
    </div>
  </div>
</form>

listing.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-listings',
  templateUrl: './listings.component.html',
  styleUrls: ['./listings.component.css']
})
export class ListingsComponent implements OnInit {
  items: Array <{}> = []
  length: number

  constructor (private dataService: DataService) {

  }

  ngOnInit() {
    this.getMockData()
  }

  getMockData(): void {
    this.dataService.getData().then(data =>{
      this.items =  data
      this.length =  data.length
      console.log(this.items)
      console.log(this.length)
    });
  }

}

listings.component.html

   <table class="table table-responsive">
    <thead class="thead">
      <tr>
        <th scope="col"><span class="text-blue">ID</span></th>
        <th scope="col bold text-blue"><span class="text-blue">Name</span></th>
        <th scope="col bold text-blue"><span class="text-blue">Owner Committee</span></th>
        <th scope="col bold text-blue"><span class="text-blue">Created By</span></th>
        <th scope="col bold text-blue"><span class="text-blue">Date Created</span></th>
        <th scope="col bold text-blue"><span class="text-blue">Description</span></th>
      </tr>
    </thead>
    <tbody class="tbody">
      <tr *ngFor="let item of items">
        <td>{{item.id}}</td>
        <td>
          <div class="item-info"><span class="item-name"><a href="javascript:void(0);">{{item.name}}</a></span></div>
        </td>
        <td>{{item.owner}}</td>
        <td>{{item.created}}</td>
        <td>{{item.date}}</td>
        <td>{{item.description}}</td>
      </tr>
    </tbody>
  </table>

pipe.ts

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    if (!items) return []
    if (!searchText) return items
    searchText = searchText.toLowerCase()
    return items.filter(it => {
      return it.toLowerCase().includes(searchText)
    })
  }
}

表单提交上的Angular 2/4过滤器列表

0 个答案: