如何以一定角度过滤垫子芯片>> [

Question

我正在做角度项目，我想让用户从现有标签（芯片）中搜索/过滤。我有一个搜索框，可以过滤普通列表，但是当我尝试对标签进行过滤时，我不确定该如何做。

我的垫子放在home.component.html中。

<mc-tags [chips] = "tags" ></mc-tags>

我在home.component.html中的搜索框

<input matInput (input)="updateQuery($event.target.value)" class="input" >

list.ts中的数据

export const tags = ['Google', 'Manufacturer'];

home.component.ts文件

import { Component, OnInit } from '@angular/core';
import { users, tags } from './users.data';

@Component({
  selector: 'mc-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.scss']
})
export class ExploreComponent{

  query: string;
  users = users;
  tags = tags;

  updateQuery(query: string) {
    this.query = query;
  }
}

这是现在的样子

Picture

这是我通常过滤正常列表/数据的方式

    <div [hidden]="!query">
    <div *ngFor="let name of users | search:query">{{ name }}</div>
    </div>

没有使用mc-tags的Stackblitz文件，因为它是从不同的组件使用的

https://stackblitz.com/edit/angular-vcklft

我正在做角度项目，我想让用户从现有标签（芯片）中搜索/过滤。我有一个搜索框，可以过滤一个普通列表，但是当我尝试对标签进行过滤时，我不确定...

Answer 1

您可以执行下面描述的操作。