typescript - როგორ შევცვალოთ მონაცემები change მოვლენით Angular 8-ში

როგორ შევცვალოთ მონაცემები (change) მოვლენას გამოყენების დროს. მე ვცდილობ შევცვალო გალერეის ელემენტები მნიშვნელობის შესაბამისობის მიხედვით, თავდაპირველად მინდა ყველას აჩვენოს გალერეის ყველა ელემენტი

public items = [{
    value: 'All',
    name: 'All Items'
  },
  {
    value: 'Photos',
    name: 'Photo Items'
  },
  {
    value: 'Video',
    name: 'Video Items'
  },
];

<div *ngFor="let item of items" class="nav-li">
  <ul>
    <li class="value" [value]="item.value"><a href="">{{item.value}}</a></li>
  </ul>

</div>

<div class="gallery">
  <div *ngFor="let item of items" class="card">
    <div class="data">{{item.name}}</div>
  </div>
</div>

მინდა წარმოვაჩინოთ ყველა ნივთი, და თუ ფოტოზე დააჭერ, შეიტანე ცვლილება ისე, რომ ფოტოებში არსებული მონაცემები გამოისახოს.

პასუხი #1

დემო ეს არის HTML ხაზის სხრილით

<div *ngFor="let item of items | customPipe : filter" class="card">
    <div class="data">{{item.name}}</div>
</div>

კომპონენტში შექმენით ფილტრის მნიშვნელობა როგორც საწყისი 'ყველა'

filter='All'

ნიშნავს სიაში თითოეულ li-ზე კლიკზე მეთოდის მიწოდებას

<ul>
   <li class="value"(click)="onChange(item.value)" [value]="item.value"><a href="">{{item.value}}</a></li>
</ul>

კომპონენტში

onChange(value){
  this.filter=value;
}

ეს არის წყვეტის მაგალითი

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customPipe'
})

export class CustomPipe implements PipeTransform {
  transform(row: any[],filter:string): any {
      return row.filter(x=>filter=='All' || x.value==filter);       
  }
}