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

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

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"},
  ]

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


person Nivesh Elangovanraaj    schedule 26.01.2019    source источник
comment
Можете ли вы предоставить StackBlitz   -  person Prashant Pimpale    schedule 26.01.2019
comment
По какой-то причине я не могу воспроизвести код. По сути, я хочу достичь того, что у меня есть два массива в компоненте, и я хочу фильтровать источник данных на основе значений массива.   -  person Nivesh Elangovanraaj    schedule 26.01.2019
comment
Хорошо, но два массива, и вы ждете, чтобы отфильтровать данные из array1   -  person Prashant Pimpale    schedule 26.01.2019
comment
Нет, есть два массива, которые состоят из выбранных значений из двух раскрывающихся списков с множественным выбором. Я хочу отфильтровать данные, отображаемые в мат-карте, на основе выбранных значений из обоих массивов.   -  person Nivesh Elangovanraaj    schedule 26.01.2019
comment
Вы хотите объединить два массива? Это массив selected1 и selected2?   -  person Prashant Pimpale    schedule 27.01.2019
comment
Нет. Оба массива состоят из значений разных отображаемых столбцов. Я хочу отфильтровать отображаемые данные на основе значения, выбранного в массивах. Думаю, я запутал вас, сказав, что есть два массива. Допустим, есть только один массив, который выглядит так: array1 = [красный, синий, зеленый], тогда я хочу отображать только строки с этими цветами.   -  person Nivesh Elangovanraaj    schedule 27.01.2019
comment
Теперь понятно! Просто отредактируйте свой вопрос с помощью этих двух массивов с некоторыми образцами данных, попробую   -  person Prashant Pimpale    schedule 27.01.2019
comment
Редактировал вопрос сейчас! @PrashantPimpale   -  person Nivesh Elangovanraaj    schedule 27.01.2019
comment
Разместили проверку ответа один раз!   -  person Prashant Pimpale    schedule 27.01.2019
comment
Вы тоже хотите этот { "id": "5", "name": "xyz", "color": "red" } объект?   -  person Prashant Pimpale    schedule 27.01.2019


Ответы (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

person Prashant Pimpale    schedule 27.01.2019
comment
Да, это именно то, что я искал, но, тем не менее, я столкнулся с проблемой. Я получаю данные из backend api через службу, и я объявил dataSource = new MatTableDataSource (); использовать мат-пагинатор. Из-за этого я не могу использовать методы some, push and find. Есть ли способ обойти это? - person Nivesh Elangovanraaj; 27.01.2019
comment
да, после этого массива фильтров просто добавьте к нему dataSource и другое свойство - person Prashant Pimpale; 27.01.2019
comment
Если можно, подскажите, как это сделать? - person Nivesh Elangovanraaj; 27.01.2019
comment
Эй, это все еще не сработало. Я создал stackblitz того, как я показываю данные. Не могли бы вы помочь мне, как добавить сюда свою логику? - person Nivesh Elangovanraaj; 27.01.2019
comment
Конечно, дайте мне немного времени! - person Prashant Pimpale; 27.01.2019
comment
Ага. заранее спасибо - person Nivesh Elangovanraaj; 27.01.2019
comment
Я закончил с образцом JSON API, посмотрите здесь: stackblitz.com/edit/ - person Prashant Pimpale; 27.01.2019
comment
@ niveshK.E это нормальный API получения, поэтому я использовал это - person Prashant Pimpale; 27.01.2019
comment
Оно работает! Но опять же одна небольшая проблема: он отображает только первый экземпляр идентификаторов. Допустим, в моем json data id: 1 повторяется 5 раз, но ваш код отображает только первый экземпляр id: 1 и игнорирует оставшиеся 4 записи. - person Nivesh Elangovanraaj; 27.01.2019
comment
Ага! Просто используйте filter вместо find - person Prashant Pimpale; 27.01.2019
comment
@ niveshK.E вам также не нужно это условие if, я удалил и обновил ответ - person Prashant Pimpale; 27.01.2019
comment
Я столкнулся с другой проблемой: что, если массив, который мы используем для фильтрации данных, будет обновляться динамически? Как обновить подписку в таком случае? Или мы можем отфильтровать данные вне подписки? - person Nivesh Elangovanraaj; 28.01.2019