Angular 中下拉列表的值返回未定义

Question

我在单独的子组件中有两个下拉列表，它们包含在父表单组件中。表单组件还包含一个数量输入字段。提交时，数量的值返回得很好，但下拉列表中的值返回未定义。

这是我的表单组件：

export class BestelformulierComponent {
  selectedGroente: { naam: string, prijs: number };
  selectedWinkel: {naam:string};
  aantal: number;

  onGroenteSelected(groente: {naam:string, prijs:number}) {
    this.selectedGroente = groente;
  }
  
  onWinkelSelected(winkel: {naam:string}){
    this.selectedWinkel = winkel;
  }

  onSubmit() {
    console.log(this.selectedWinkel, this.aantal, this.selectedGroente);
  }
}

以及相应的表格html：

<h1>Bestelformulier</h1>
<form #bestelFormulier="ngForm" (ngSubmit)="onSubmit()">
    <app-winkels (winkelSelected)="onWinkelSelected($event)"></app-winkels>
    <app-groenten (groenteSelected)="onGroenteSelected($event)"></app-groenten>
    <div>
        <label>Aantal/gewicht (stuk)</label>
        <input type="number" required [(ngModel)]="aantal" name="aantal">
    </div>
    <button type="submit" >Bestel</button>
</form>

商店的下拉列表：

export class WinkelsComponent implements OnInit{
  winkels: Winkel[] = [];

  @Output() winkelSelected = new EventEmitter<{naam:string}>();

  ngOnInit(): void {
    this.getWinkels();
  }

  getWinkels(): void {
    this.winkelService.getWinkels()
        .subscribe(winkels => this.winkels = winkels);
  }

  selectedWinkel: {naam:string}

  constructor(private winkelService: WinkelService){
      this.selectedWinkel = {naam: ''}
  }

  onWinkelSelected(){
    this.winkelSelected.emit(this.selectedWinkel);
  }
}

商店下拉 html:

  <label for="winkelSelect">Kies winkel:</label>
  <select id="winkelSelect" [(ngModel)]="selectedWinkel" (change)="onWinkelSelected()">
    <option name="winkel" *ngFor="let winkel of winkels" [ngValue]="selectedWinkel" title="{{winkel.adres | titlecase}}, {{winkel.post}} {{winkel.gemeente}}">{{winkel.naam}}</option>
  </select>

最后，第二个下拉列表（蔬菜）：

export class GroentenComponent implements OnInit {
  groentes: Groente[] = [];

  @Output() groenteSelected = new EventEmitter<{naam:string, prijs:number}>();

  constructor(private groenteService: GroenteService) {
    this.selectedGroente = {naam: '', prijs: 0};
  }

  ngOnInit(): void {
    this.getGroenten();
  }

  getGroenten(): void {
    this.groenteService.getGroentes()
        .subscribe(groentes => this.groentes = groentes);
  }

  selectedGroente: { naam: string, prijs: number }

  onGroenteSelected(){
    this.groenteSelected.emit(this.selectedGroente);
  }
}

蔬菜下拉 html:

    <label for="groenteSelect">Kies groente:</label>
    <select id="groenteSelect"  [(ngModel)]="selectedGroente" (change)="onGroenteSelected()">
        <option *ngFor="let groente of groentes" name="groente" [ngValue]="selectedGroente">{{groente.naam}} ({{groente.prijs}}/{{groente.eenheid}})</option>
    </select>
    

我猜我用 ngModel/ngValue 搞砸了什么？我是 Angular 的新手，所以我不确定我是否误解了什么..

Answer 1

看起来问题在于您如何在下拉列表中使用 [(ngModel)] 和 [ngValue]。

在 WinkelsComponent 中，您正确地使用 [ngValue] 将选定值绑定到 selectedWinkel。但是，在 GroentenComponent 中，您使用的是 [ngValue]="selectedGroente"，它将 selectedGroente 的初始值绑定到每个选项。相反，您应该使用 [ngValue]="groente" 将每个选项绑定到相应的 groente 对象。

此外，您没有在组件中正确设置 selectedWinkel 和 selectedGroente 变量。您应该将它们设置为 null 或 undefined 而不是空对象。

这是 GroentenComponent 的更新代码：

export class GroentenComponent implements OnInit {
  groentes: Groente[] = [];

  @Output() groenteSelected = new EventEmitter<{naam:string, prijs:number}>();

  selectedGroente: { naam: string, prijs: number };

  constructor(private groenteService: GroenteService) {}

  ngOnInit(): void {
    this.getGroenten();
  }

  getGroenten(): void {
    this.groenteService.getGroentes()
        .subscribe(groentes => this.groentes = groentes);
  }

  onGroenteSelected(){
    this.groenteSelected.emit(this.selectedGroente);
  }
}

GroentenComponent 的更新 HTML：

<label for="groenteSelect">Kies groente:</label>
<select id="groenteSelect" [(ngModel)]="selectedGroente" (change)="onGroenteSelected()">
    <option *ngFor="let groente of groentes" [ngValue]="groente">{{groente.naam}} ({{groente.prijs}}/{{groente.eenheid}})</option>
</select>

请注意，相同的更改应应用于 selectedWinkel 和 WinkelsComponent。