Мне нужно отправить значения из моих опций выбора

Question

Я использую угловой. Я хочу отправить информацию о том, какой элемент я выбрал в опции выбора. В частности, я хочу отправить значение данных в переменную в моем product-form.component.ts. Я пытался использовать ngModel, но постоянно получаю сообщения о том, что он не распознает (click) = selectCategory1 (category) использует функцию, которую я использую для шаблонов форм, что может быть причиной. Вы можете увидеть мой код в реальном времени по адресу: https://stackblitz.com/github/RashellSmith/Dashboard-FrontEnd

Компонент формы продукта html

<div class="form-group">
    <label for="productCategory">Product Category</label>
    <select  [(ngModel)]="model.category" (click)=selectCategory1(category) name="category"  class="form-control" id="productCategory" (click)="value()">
        <option *ngFor="let category of categories" (click)=selectCategory1(category) data-value="{{category.category}}" id={{category.categoryName}} >{{category.categoryName}}</option>
    </select>
</div>

Компонент формы продукта ts

export class ProductFormComponent implements OnInit {

suppliers: Supplier[];
categories: Category[];
value: number;

model = new Newproduct("name",new Category( this.value,"name"),66,33,true,new Supplier(null,null),76);
selectCategory1(Category){
  console.log(Category);
}
submitted = false;
get diagnostic() { return JSON.stringify(this.model); }

onSubmit() { this.submitted = true; }

  constructor(private supplierService: SupplierService,private categoryService: CategoryService) { }

  ngOnInit() {
    this.supplierService.getAll().subscribe(data => {
      this.suppliers = data;
    });

    this.categoryService.getAll().subscribe(data => {
      this.categories = data;
    });
  }
}

Answer 1

Вы определенно пытаетесь усложнить ситуацию. Вам нужно привязать простой (change) метод к вашему списку выбора, который будет срабатывать при изменении значения. Вы можете передать значение этой функции, используя переменную ссылки шаблона как

<Select #select (change)="SelectChanged(select.value)">

, или вы можете связать директиву [(ngModel)] и получить к ней доступ непосредственно в классе вашего компонента на (change)

Aпример кода шаблона:

<select [(ngModel)]="selectedOption" (change)="GetSelectedValue(selectedOption)">
    <option *ngFor="let option of options" [ngValue]="option">{{option}}</option>
</select>

И класс компонента будет выглядеть следующим образом:

GetSelectedValue(val) {
    //do something with val
}

Stackblitz at: https://stackblitz.com/edit/angular-r4d7ul