带有Angular的ASP.NET Core上的级联下拉列表

Question

Angular v6.1.10 | ASP.Net Core v2.2.102

---

我正在使用Angular应用在ASP.NET Core上实现级联下拉列表，但是第二个列表的值取决于第一个下拉列表的值，但没有出现。

控制台也没有任何错误，即使我选择了一个Porto（如下图所示）也没有错误。

Portos可以具有不同的模型（我仅在前端将其命名为“ Especie”）。

以下是API的示例：

感谢您的帮助。

---

fish-form.component.html

<h1>Adiciona um Peixe Novo</h1>
<form>
  <div class="form-group">
    <label for="porto">Porto</label>
    <select id="porto" class="form-control" (change)="onPortoChange($event.target.value)" [(ngModel)]="fish.porto" name="porto">
      <option value=""></option>
      <option *ngFor="let p of portos" value="{{ p.id }}">{{ p.nome }}</option>
    </select>
  </div>
  <div class="form-group">
    <label for="models">Especie</label>
    <select id="models" class="form-control">
      <option value=""></option>
      <option *ngFor="let m of models " value="{{ m.id }}">{{ m.nome }}</option>
    </select>
  </div>
</form>

fish-form.component.ts

import { PortoService } from './../services/porto.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-fish-form',
  templateUrl: './fish-form.component.html',
  styleUrls: ['./fish-form.component.css']
})
export class FishFormComponent implements OnInit {
  portos: any[];
  models: any[];
  fish: any = {};

  constructor(private PortoService: PortoService) { }

  ngOnInit() {
    this.PortoService.getPortos().subscribe(portos =>
      this.portos = portos);
  }

  onPortoChange() {
    var selectedPorto = this.portos.find(p => p.id == this.fish.portos );
    this.models = selectedPorto ? selectedPorto.models : [];
  }

}

Answer 1

正如@ Jota.Toledo所说，我将选择范围限制为fish.porto，但我尝试访问的组件是fish.portos。

通过将选择更改为portos

解决了问题