Arhn - архитектура программирования

Показать фильтр на основе выбранного значения в раскрывающемся списке

Использую реактивные формы angular6. В форме есть 3 выпадающих списка. всякий раз, когда в любом из раскрывающихся списков происходит изменение значения, мне нужно отображать эти выбранные значения в столбце «примененный фильтр» со значком закрытия. поэтому, если щелкнуть значок закрытия, фильтр должен скрыться, а соответствующий раскрывающийся список должен быть сброшен.

Я пытался попробовать с помощью pipe и pipetransform. Но в данном случае это оказалось бесполезным. Пожалуйста, дайте мне знать любой идеальный способ продолжить это

Ожидаемый результат: введите здесь описание изображения

typescript filter angular6
28.03.2019

Ответы:


1

Вы можете создать свойство для каждого поля, например: selectedDeliveryMethod, selectedAssesments, selectedAvailibity и т. д., а затем использовать двустороннюю привязку, чтобы установить свойства selected* в зависимости от раскрывающегося списка. Чтобы отобразить его, вы можете отображать его только тогда, когда значение не определено (undefined), и когда вы нажимаете на значок закрытия, вы устанавливаете значение undefined, поэтому оно исчезнет.

Пример:

Составная часть

@Component({ ... })
export class AppComponent {
  public selectedItem: any;
  public itemArray: any = [
    "USA",
    "Canada",
    "France",
  ];

  public removeSelectedItem(): void {
    this.selectedItem = undefined;
  }
}

HTML

<select [(ngModel)]="selectedItem">
  <option *ngFor="let item of itemArray">{{ item }}</option>
</select>

Selected filter: 
<span *ngIf="selectedItem != undefined">
  {{ selectedItem }}
  <button (click)="removeSelectedItem()">Remove selected item</button>
</span>

Существует stackblitz, чтобы показать вам, как это работает: https://stackblitz.com/edit/angular-eytqnx

Другим вариантом было бы добавить элемент выбора любого раскрывающегося списка в Array, а затем отобразить его с помощью директивы *ngFor с настраиваемым шаблоном (текст + значок закрытия)

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

28.03.2019
  • Благодарю вас! Позвольте мне попробовать этот подход 29.03.2019
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..