Фильтрация отображаемых данных JSON на основе массива в Angular 7

Question

Я получаю данные json из бэкэнда, используя сервис, и я отображаю их через цикл в main.html.Теперь есть массив, который состоит из значений отображаемого столбца.Допустим, массив выглядит следующим образом: colors = [red, blue].Тогда я хочу, чтобы отображались только записи с красным и синим цветом.

main.html

<div  class="flip-right" *ngFor="let items of obs | async">
 <mat-card>
   <mat-card-header>
       <mat-card-title>{{items.name}}</mat-card-title>
   </mat-card-header>
   <mat-card-subtitle>{{items.color}} </mat-card-subtitle>

 </mat-card>
</div>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

main.ts

   export class PrivateComponent implements OnInit,OnDestroy {
        //filter variables to store the selected values
        color=[red,blue];


        subscription: Subscription;

      @ViewChild(MatPaginator) paginator: MatPaginator;


      obs: Observable<any>;
      dataSource = new MatTableDataSource();

      constructor(
        private changeDetectorRef: ChangeDetectorRef,
        private cardsInfo :CardsInfoService) { 



    }

      ngOnDestroy(): void {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
        if (this.dataSource) { 
          this.dataSource.disconnect(); 
        }
      }
      ngOnInit(){
        this.cardsInfo.getCardsInfo()
        .subscribe(
          data => {
            this.dataSource.data = data;
          });


          this.changeDetectorRef.detectChanges();
          this.dataSource.paginator = this.paginator;
          this.obs = this.dataSource.connect();


      }


      ngAfterViewInit() {

        this.dataSource.paginator = this.paginator;
      }



    }

Данные JSON, которые передаются через службу

[
   {"id":"1","name":"abc","color":"red"},
{"id":"2","name":"def","color":"blue"},
{"id":"3","name":"ghi","color":"green"},
{"id":"4","name":"def","color":"yellow"},
{"id":"5","name":"xyz","color":"red"},
  ]

Здесь я хочу, чтобы отображались только красный и синий цвета.

Answer 1

Вы можете использовать цикл for в массиве array1 [, для которого вы хотите проверить, доступен ли цвет, или нет], а затем проверить, доступен ли цвет в массиве назначения, поэтому код будет :

Код TS:

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

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  styleUrls: ['list-overview-example.css'],
})
export class ListOverviewExample {

  array1: any[] = ['red', 'blue', 'green'];

  originalArray = [
    { "id": "1", "name": "abc", "color": "red" },
    { "id": "2", "name": "def", "color": "blue" },
    { "id": "3", "name": "ghi", "color": "green" },
    { "id": "4", "name": "def", "color": "yellow" },
    { "id": "5", "name": "xyz", "color": "red" },
  ]
  filteredArray: any[] = [];

  constructor() {
    for (var i = 0; i < this.array1.length; i++) {
      var list = this.originalArray.filter(x => x.color == this.array1[i]);
      list.forEach(x => {
        this.filteredArray.push(x);
      })
    }
    console.log(this.filteredArray)
  }
}

Stackblitz