Передайте два значения из раскрывающихся списков в сервис в angular

Question

Мне нужно передать два значения из двух разных выпадающих списков в мой сервис. И я хотел бы сделать это по нажатию на кнопку. Поэтому я написал такой компонент:

import { Component, Input, OnInit } from '@angular/core';
import { CategoryType } from '../models/category-type.enum';
import { CountryType } from '../models/country-type.enum';
import { NewsServiceService } from '../services/news-service.service';

@Component({
  selector: 'app-dropdown',
  template:
    `
  <div>

    <select [(ngModel)]="catSelected" (ngModelChange) = "onClick($event)" >
        <option *ngFor = "let type of CategoryType.values()" [ngValue] = 'type'>
            {{type}}
        </option>
    </select>
    <br>
    <select [(ngModel)]="couSelected" (ngModelChange) = "onClick($event)" >
        <option *ngFor = "let type of CountryType.values()" [ngValue] = 'type'>
            {{type}}
        </option>
    </select>
    <br>
    <button ng-click="onClick()">Click to get news</button>
    </div>
`
})
export class DropdownComponent implements OnInit {
  CategoryType = CategoryType;
  CountryType = CountryType;
  title: string;
  couSelected: string;
  catSelected: string;

  constructor(private newsService: NewsServiceService) {
  }
  ngOnInit() {
    this.catSelected = 'Select_Category';
    this.couSelected = 'Select_Country';
  }
  onClick(catSelected: string, couSelected: string) {
    this.newsService.getNews(catSelected, couSelected).subscribe(
      data => {
        this.catSelected = data;
      }
    );
  }
}

Как я уже писал, у меня есть два раскрывающихся списка со значениями CategoryType CountryType

и одна кнопка для отправки клика.

Каждое изменение в выпадающем списке делает ngModelChange и отправляет только одно значение моим службам. Я хочу достичь:

1. Выберите значение из CategoryType

2. Выберите значение из CountryType

3. Затем нажмите кнопку и передайте значения CategoryType и CountryType моему сервису.

Сейчас передается только одно значение, и я не знаю почему.

onClick функция вообще не работает.

Answer 1

Поскольку вы передаете только одно значение в функцию onClick ().

Исправьте, передав элементы изнутри DropdownComponent вместо того, чтобы передавать его как click($event)

import { Component, Input, OnInit } from '@angular/core';
import { CategoryType } from '../models/category-type.enum';
import { CountryType } from '../models/country-type.enum';
import { NewsServiceService } from '../services/news-service.service';

@Component({
  selector: 'app-dropdown',
  template:
    `
  <div>

    <select [(ngModel)]="catSelected" >
        <option *ngFor = "let type of CategoryType.values()" [ngValue] = 'type'>
            {{type}}
        </option>
    </select>
    <br>
    <select [(ngModel)]="couSelected">
        <option *ngFor = "let type of CountryType.values()" [ngValue] = 'type'>
            {{type}}
        </option>
    </select>
    <br>
    <button ng-click="onClick()">Click to get news</button>
    </div>
`
})
export class DropdownComponent implements OnInit {
  CategoryType = CategoryType;
  CountryType = CountryType;
  title: string;
  couSelected: string;
  catSelected: string;

  constructor(private newsService: NewsServiceService) {
  }
  ngOnInit() {
    this.catSelected = 'Select_Category';
    this.couSelected = 'Select_Country';
  }
  onClick() {
    this.newsService.getNews(this.catSelected, this.couSelected).subscribe(
      data => {
        this.catSelected = data;
      }
    );
  }
}

Answer 2

Есть две основные проблемы с вашим кодом:

1. Вы получаете catSelected и couSelected из параметров, но вы можете просто использовать ссылку this :

onClick() {
  this.newsService.getNews(this.catSelected, this.couSelected)...
}

Вы используете ng-click вместо (click), поэтому нажатие кнопки не срабатывает. Сделайте это:

<button (click)="onClick()">Click to get news</button>

---

При этом я хочу дать вам несколько советов:

1. Не вызывать функции в шаблонах. Вместо этого объявите CategoryType и CountryType следующим образом:

readonly categoryTypes = CategoryType.values();
readonly countryTypes = CountryType.values();

Не используйте [ngValue] для примитивных типов. Это не обязательно. Вы можете просто использовать [value].