angular 自定義 pipe & 輸入搜索自動完成

Question

我正在嘗試使用任何字段值進行自動完成輸入，因此我創建了一個自定義 pipe。

我的問題是我該怎么做，因為我有一個顯示我的 json 數據的組件和另一個包含自動完成輸入的組件？

我應該使用@Input 和@Output 裝飾器嗎？

我是初學者我不知道怎么做

非常感謝您的幫助

json.file

 {
        "boatType": "Semi-rigide",
        "img": "/assets/img/boat-img/semi-rigide.jpg",
        "longeur": 10,
        "largeur": 20,
        "tirantEau": 50,
        "equipage": false,
        "annexe": true
    },

table.component.html

<div class="search">
    <app-input #inputComponent></app-input>
</div>
<table>
   <caption>Statement Summary</caption>
    <thead>
        <tr>
            <th scope="col" class="toto">img</th>
            <th scope="col">Type de bateau</th>
            <th scope="col">longeur</th>
            <th scope="col">largeur</th>
            <th scope="col">tirant d'eau</th>
            <th scope="col">equipage</th>
            <th scope="col">annexe</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let boat of user | filter : inputComponent?.searchText">
            <td data-label="img"><img [src]="boat.img" alt="boat" class="img"></td>
            <td data-label="boat type">{{ boat.boatType }}</td>
            <td data-label="longeur">{{boat.longeur}} cm</td>
            <td data-label="largeur">{{boat.largeur}} cm</td>
            <td data-label="tirant d'eau">{{boat.tirantEau}} cm</td>
            <td data-label="equipage">{{boat.equipage ? "Oui" : "Non"}}</td>
            <td data-label="annexe">{{boat.annexe ? "Oui" : "Non"}}</td>
        </tr>
    </tbody>
</table>

input.component.html

 <input type="text" placeholder="Chercher un bateau.." [(ngModel)]="searchText">

過濾器.pipe

     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;

    // TODO: need to improve this filter
    // because at this moment, only filter by boatType
    return items.filter(item => {
      return item.boatType.toLowerCase().includes(searchText.toLowerCase());
    });
  }
        
        }

Answer 1

代碼需要一些更改，因為您以不正確的方式使用這些工具。

但是，我進行了一些重構，並且使代碼可以正常工作。

一個簡短的解釋和這里關於stackblitz的解決方案： https://stackblitz.com/edit/angular-ivy-ybubhx?file=src/app/filter.pipe.ts

我必須使用#inputComponent從app-input組件獲取搜索輸入引用。 （還有其他方法可以得到這個）。

app.component.html

<div class="search">
  <!-- I create a variable on template called inputComponent -->
  <app-input #inputComponent></app-input> 
</div>
<table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope="col">type</th>
      <!-- <th scope="col" class="toto">img</th> -->
      <th scope="col">longeur</th>
      <th scope="col">largeur</th>
      <th scope="col">tirant d'eau</th>
      <th scope="col">equipage</th>
      <th scope="col">annexe</th>
    </tr>
  </thead>
  <body>
    <!-- I pass the searchText string taken from inputComponent to our filter pipe -->
    <tr *ngFor="let boat of boats | filter : inputComponent?.searchText">
      <!-- <td data-label="img"><img [src]="boat.img" alt="boat" class="img"></td> -->
      <td data-label="boat type">{{ boat.boatType }}</td>
      <td data-label="longeur">{{boat.longeur}} cm</td>
      <td data-label="largeur">{{boat.largeur}} cm</td>
      <td data-label="tirant d'eau">{{boat.tirantEau}} cm</td>
      <td data-label="equipage">{{boat.equipage ? "Oui" : "Non"}}</td>
      <td data-label="annexe">{{boat.annexe ? "Oui" : "Non"}}</td>
    </tr>
  </tbody>
</table>

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  // I use boats as payload to demonstrate the filter pipe functionality
  boats = [
    {
      boatType: "a1a12",
      img: "/assets/img/boat-img/semi-rigide.jpg",
      longeur: 10,
      largeur: 20,
      tirantEau: 50,
      equipage: false,
      annexe: true
    },
    {
      boatType: "EAEA",
      img: "/assets/img/boat-img/eaea.jpg",
      longeur: 10,
      largeur: 20,
      tirantEau: 50,
      equipage: false,
      annexe: true
    },
    {
      boatType: "bcbc",
      img: "/assets/img/boat-img/bcbc.jpg",
      longeur: 10,
      largeur: 20,
      tirantEau: 50,
      equipage: false,
      annexe: true
    },
    {
      boatType: "bcbc 2",
      img: "/assets/img/boat-img/bcbc.jpg",
      longeur: 10,
      largeur: 20,
      tirantEau: 50,
      equipage: false,
      annexe: true
    }
  ];
}

input.component.ts

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

@Component({
  selector: "app-input",
  template: `
    <input
      type="text"
      placeholder="Chercher un bateau.."
      [(ngModel)]="searchText"
    />
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class InputComponent {
  searchText: string;
}

filter.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;

    // TODO: need to improve this filter
    // because at this moment, only filter by boatType
    return items.filter(item => {
      return item.boatType.toLowerCase().includes(searchText.toLowerCase());
    });
  }
}

angular 自定義 pipe & 輸入搜索自動完成

問題描述

1 個解決方案

解決方案1
1 已采納 2021-03-07 02:09:57

angular 自定義 pipe &amp; 輸入搜索自動完成

問題描述

1 個解決方案

解決方案1 1 已采納 2021-03-07 02:09:57

angular 自定義 pipe & 輸入搜索自動完成

解決方案1
1 已采納 2021-03-07 02:09:57