Angular 2 получает .length, но считает только определенные данные в компоненте html или ts

Учитывая приведенный ниже сценарий:

//just a dummy data source for our list
import { healthModel } from './healthModel';

export const healthListAll: healthModel[] =
[
    {
      id: 1,
      Name: 'Asparagus',
      healthGroup: 'Vegetable',
      isAvail: 1
    },
    {
      id: 2,
      Name: 'Banana',
      healthGroup: 'Fruit',
      isAvail: 0
    },
    {
      id: 3,
      Name: 'Pomegranate',
      healthGroup: 'Fruit',
      isAvail: 1
    }, 
    {
      id: 2,
      Name: 'Artichoke',
      healthGroup: 'Vegetable',
      isAvail: 0
    }
]

по компоненту ts я умею healthList = healthListAll;

Таким образом, я могу получить общее количество компонентов html через {{healthList.length}}

Однако есть ли способ получить только длину элементов, где isAvail = 0 или через healthGroup? могу ли я сделать это на html-компоненте, чтобы он был чистым? или это можно сделать только на компоненте ts?

Извинения. Совершенно новый для angular.

Если вы хотите использовать фильтр непосредственно в своем шаблоне, вам нужно создать канал и все. Найдите документацию по пользовательским пайпам на angular.io. В основном канал будет выполнять фильтр, а шаблон будет отображать только результат канала.

Carlos E 16.05.2019 18:09

@CryingFreeman понял, спасибо, я нашел документацию и здесь (angular.io/api/ядро/канал). Однако мне, возможно, придется посмотреть учебник для этого.

Malcolm Salvador 16.05.2019 18:12

Вы можете создать трубу настолько гибкой, насколько хотите, и она также должна быть тестируемой.

Carlos E 16.05.2019 18:16

вот пример stackblitz.com/edit/custom-pipes-пример. фильтр - это просто Javascript, канал - это магия angular

Carlos E 16.05.2019 18:22

Хорошо, спасибо, что указали на это. Сосредоточимся на решениях с трубами

Malcolm Salvador 16.05.2019 18:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
160
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Шаблон не может этого сделать, поэтому вы можете применять только логику фильтрации, сортировки и т. д. в своем компоненте, после чего вы можете привязать данные к шаблону с помощью интерполяции.

Надеюсь, это поможет.

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

Чтобы получить длину элементов, где isAvail = 0 или healthGroup, вы должны сделать это в своем ts

 var length=this.healthListAll.filter(x=>x.isAvil==0).length
    var length=this.healthListAll.filter(x=>x.healthGroup=='Fruit').length

Понятно, что означает x в обоих синтаксисах?

Malcolm Salvador 16.05.2019 17:52

x будет каждым элементом в массиве.

Ashok 16.05.2019 17:55

Другие вопросы по теме