Заказать список по убыванию - Ionic

Когда пользователь выполняет поиск, он получает список элементов, включенных в его поиск, я не могу понять, как отсортировать его среди элементов, которые включают в первую очередь наименьшее количество. Пример Я ищу «картофель», «лук-порей». Мне возвращаются все элементы, которые включают это, но первый элемент может включать 15, а следующие 5, я хочу, чтобы первым был указан самый низкий.

У меня есть список ионов, как показано ниже:

<ion-list>
  <ion-item *ngFor = "let item of recipes" (click) = "goToDetails(item.id)">
    <div class = "thumb">
      <img src = "{{item.smallImageUrls}}">
    </div>
    <div class = "item-text">
      <div class = "inner">
        <div class = "title">
          <h1>{{item.recipeName}}</h1>
        </div>
        <div class = "rating">
          <rating [(ngModel)] = "item.rating"></rating>
        </div>
        <div class = "time">
          <p>{{item.totalTimeInSeconds | HoursMinutesSeconds}} minutes</p>
        </div>
        <div class = "ingredients">
          <p>{{item.ingredients.length}} Ingredients</p>
        </div>
      </div>
    </div>
  </ion-item>
</ion-list>

Мне нужно отсортировать весь список в зависимости от

item.ingredients.length

для сортировки от меньшего к большему по умолчанию.

javascript angular sorting typescript ionic-framework

10.03.2018 14:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

вы не можете использовать конвейер для их сортировки, потому что в *ngFor у вас есть доступ только к одному элементу, а не ко всем из них для сортировки, тогда вы должны отсортировать весь массив в вашем ts-файле, а затем выполнить итерацию по нему:

recipes.sort(function(a,b){
  return a.ingredients.length - b.ingredients.length; 
});

Спасибо! Я пробовал что-то подобное, но просто неправильно понял синтаксис

— 10.03.2018 14:33

10.03.2018 14:28

Я предполагаю, что ваш массив recipes поступает из службы. В вашем RecipeService вы можете отсортировать этот массив.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
...
@Injectable()
export class RecipeService {
  ...
  constructor(private http: HttpClient) { }

  getRecipes(): Observable<Recipe> {
    return this.http
      .get<Recipe[]>(`${url}`)
      .pipe(map(recipes: Array<Recipe>) => this.sortArray(recipes)), this.catchHttpErrors());
  }
  ...
  sortArray(arr: Array<Recipe>) {
    return arr.sort((a: Recipe, b: Recipe) => {
      if (a.ingredients.length < b.ingredients.length) {
        return -1;
      } else if (a.ingredients.length > b.ingredients.length) {
        return 1;
      }
      return 0;
    });
  }
}

или что-то в этом роде ...

10.03.2018 14:33