angular中的下拉菜单选择not picking

Question

错误

core.js:6479 ERROR TypeError: Cannot read property 'category' of undefined
    at ProductManagementComponent.search (product-management.component.ts:53)
    at ProductManagementComponent_Template_select_ngModelChange_0_listener (product-management.component.html:2)
    at executeListenerWithErrorHandling (core.js:15307)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.js:15351)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at EventEmitter_.next (Subject.js:39)
    at EventEmitter_.emit (core.js:25968)

html =我认为我可能在这里做错了什么，但是找不到为什么我选择的数据没有被发送

<select [(ngModel)]= "viewcat" name="pc.category" #pc.category ="ngModel" (ngModelChange)="search($event)">
        <option *ngFor = "let pc of productcategory" [ngValue] = "pc.category">
            {{pc.category|uppercase}}
        </option>
    </select>

viewcat =用于显示数据

public viewcat(){
    return this.httpclient.get("http://localhost:8094/api/ProductCategory");
  }
_____________________________________________________________
public viewcat(){
    this.productser.viewcat().subscribe((pc:{})=>{
      this.productcategory=pc;
      console.log(pc);
    });
  }

search =返回从html发送的数据的集合

 public search(form:NgForm){
    console.log("A");
    console.log(form.value.category);
    this.productser.search(form.value.category).subscribe((pc:{})=>{
      this.productcategory=pc;
      console.log(pc);
    });
  }
_____________________________________________________________
  public search(category:string){
    console.log(category);
    return this.httpclient.get(this.serverurl+"/"+category);
  }

Answer 1

您将select绑定到ngModel，这意味着您需要在组件中定义该变量。

之后，在您的模型更改事件处理程序中，您可以使用该变量来获取选择值，并基于该值执行任何操作。

<select [(ngModel)]= "category" name="category" (ngModelChange)="search($event)">
  <option *ngFor = "let pc of productCategory" [ngValue] = "pc.category">
      {{pc.category|uppercase}}
  </option>
</select>

组件类代码：-

productCategory = [{
    category:'fruits'
  },
  {
    category:'animals'
}];
category: string;

search(event:any){
    console.log(this.category);
    //Rest of code
}

工作示例：- https://stackblitz.com/edit/angular-ivy-fgaz8c?file=src%2Fapp%2Fapp.component.html