Эффективная фильтрация данных - PullRequest
Новая
       26

Эффективная фильтрация данных

0 голосов
/ 30 апреля 2018

Пример данных, которые я получаю с моего сервера: 

   tasks=  [
        {
        "id":8,
        "title":"Eight",    
        "how_often":"DS",
        "how_important_task":"",
        "how_important_improvement":"",
        "stakeholder":2,
        "project":2
        },

        {
        "id":9,
        "title":"Nine",
        "how_often":"",
        "how_important_task":"",
        "how_important_improvement":"",
        "stakeholder":2,
        "project":2
        },

        {
        "id":21,
        "title":"Seventeen",
        "how_often":"",
        "how_important_task":"",
        "how_important_improvement":"",
        "stakeholder":2,
        "project":2
        }
    ]

Шаблон, в котором я показываю эти задачи вместе с фильтрами, которые я хочу применить к ним: 

  <ion-split-pane>
    <ion-grid>
      <ion-row padding>
        <h5>Filter tasks according to</h5>
      </ion-row>

      <ion-row padding>
        <ion-col>
          <ion-list>
            <ion-item>
              <ion-label>Frequence of performance</ion-label>
              <ion-select>
                <ion-option *ngFor="let frequency of filer_per_frequency" value="{{frequency.value}}">{{frequency.title}}</ion-option>
              </ion-select>
            </ion-item>
          </ion-list>
        </ion-col>
        <ion-col>
          <ion-list>
            <ion-item>
              <ion-label>Importance</ion-label>
              <ion-select [(ngModel)]="importance">
                <ion-option *ngFor="let importance of filer_per_importance" value="{{importance.value}}">{{importance.title}}</ion-option>
              </ion-select>
            </ion-item>
          </ion-list>
        </ion-col>
        <ion-col>
          <ion-list>
            <ion-item>
              <ion-label>Importance of improvement</ion-label>
              <ion-select>
                <ion-option *ngFor="let improvement of filer_per_improvement" value="{{improvement.value}}">{{improvement.title}}</ion-option>
              </ion-select>
            </ion-item>
          </ion-list>
        </ion-col>
        <ion-col>
          <ion-list>
            <ion-item>
              <ion-label>Stakeholder</ion-label>
              <ion-select>
                <ion-option *ngFor="let stakeholder of filer_per_stakeholder" value="{{stakeholder.value}}">{{stakeholder.title}}</ion-option>
              </ion-select>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
      <ion-item-divider color="light"></ion-item-divider>

      <ion-list>
        <button detail-none (click)="expandItem(task)" ion-item *ngFor="let task of tasks">

          <h2>{{task.title}}</h2>
          <expandable [expandHeight]="itemExpandHeight" [expanded]="task.expanded">
            <hr><p>{{task.how_often | fullform}}</p>
            <p>{{task.how_important_task | fullform}}</p>
            <p>{{task.why_perform_task}}</p>
            <p>{{task.sequence_of_actions}}</p>
          </expandable>
        </button>
      </ion-list>
    </ion-grid>


  </ion-split-pane>

Я должен иметь возможность применять несколько фильтров из доступных одновременно.

Как я могу справиться с этим в моем компоненте, так как конвейеры снизят производительность?

1 Ответ

0 голосов
/ 30 апреля 2018

На самом деле разработчики Angular не используют трубы для этого. Подробнее об этом вы можете прочитать на их сайте (https://angular.io/guide/pipes#no-filter-pipe)

Вместо этого вы должны сделать это в компоненте при загрузке данных.

Как очень грубый пример 

// Assumes you load your data in ngOnInit from some service
ngOnInit() {
    this.myService.loadData().subscribe(data => {
        // Filters out all null items
        this.filtered = data.filter((item) => item != null);

    })
}
...