Угловой 2. Передача нескольких входных данных и сравнение с соответствующими свойствами в файле JSON и получение соответствующих объектов. - PullRequest
0 голосов
/ 07 июня 2018

У меня есть несколько входов в форме, как вы можете видеть некоторые из них ниже.Это поисковые входы.Multiple inputs in a form

В этом приложении я хочу получить контракты с соответствующими свойствами в файле JSON, соответствующем поиску.

Это то, что у меня сейчас есть:
HTML:

<input class="form-control text-box single-line" name="contractFirmName" 
[(ngModel)]="cFirmName">

Component.ts

searchResultsWithFirmName() {
    this.contractDataService
    .getContract(this.cFirmName)
    .subscribe(
        (contracts) => {
            this.contracts = contracts;
        }
    )
}

contractDataService

getContract(cFirmName: string): Observable<Contract[]> {
    return this.api.getContract(cFirmName);
}

APIService

getContract(cFirmName: string) {
    return this.http
      .get(API_URL + '/contracts')
      .map(response => {
        const contracts = response.json();
        return contracts.filter(
          contract => contract.contractFirmName.includes(cFirmName)
        );
      }).catch(this.handleError);
  }

В этом случае IЯ могу фильтровать для первого ввода, Название фирмы контракта.Тем не менее, будет много других случаев использования, когда используются разные входные данные.

Например: 1. Пользователь ищет контракт с фирменным наименованием и типом контракта.2. Пользователь ищет контракт, используя только тип контракта.

Я думал о том, чтобы передавать каждый вход в качестве параметра, но подумал, что было бы нехорошим кодом продолжать передавать отдельные входы, как это было быслишком долго.Есть указатели?

1 Ответ

0 голосов
/ 07 июня 2018

Почему бы вам не передать объект вместо отдельного свойства модели?

Чтобы пропустить несколько входов, сначала подготовьте объект, составляющий все значения ngModel внутри вашего компонента.Затем вы можете передать это службе.

Конечно, вы должны изменить свой сервис, чтобы учесть это изменение.

getContract(inputObj: {}): Observable<Contract[]> {
    return this.api.getContract(inputObj);
}

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

component.ts - просто пример

searchResults() {
  let inputObj = {
        firmName : cFirmName,
        firmType : cFirmType,
     }
    this.contractDataService
    .getContract(inputObj)
    .subscribe(
        (contracts) => {
            this.contracts = contracts;
        }
    )
}
...