Вызов метода, когда выбран вариант? (Angular)

Question

У меня есть приложение Angular с бэкэндом WebApi. В элементе select я показываю названия некоторых городов. Когда я выбираю один город, я хочу показать улицы этого города в таблице.

app.component.ts

export class AppComponent {
  title = 'ProbematuraFrontend';

  selectedCity:string;

  cities:City[]=[];
  streets:Street[]=[];

  constructor(private orderService:OrderService){}

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

  getCities():void{
    this.orderService.getCities().subscribe(data=>{
      console.log(data);
      this.cities=data;
    });
  }

  getStreetsOfCity(selectedCity):void{
    this.orderService.getStreetnames(selectedCity).subscribe(data=>{
      console.log(data);
      this.streets=data;
    })
  }
}

Метод getCities () заполняет элемент select. С помощью метода getStreetsOfCity () я хочу получить улицы выбранного города.

app.component. html:

<h1>Warenlieferungen</h1>
<br>
<p>Stadt:</p>
<select [(ngModel)]="selectedCity" class="form-control" style="width: 250px;height: 50px;">
  <option *ngFor="let city of cities" [ngValue]="city">{{city}}</option>
</select>

<table>
  <tr *ngFor="let street of streets">
    <td>{{street}}</td>
  </tr>
</table>


<router-outlet></router-outlet>

Этот метод в службе:

public getStreetnames(selectedCity:string):Observable<Street[]>{
    return this.httpClient.get<Street[]>(`${this.host}Order/Streets/${selectedCity}`)
  }

Я не получаю ничего обратно в моей консоли и ничего не отображается и я не знаю почему. У кого-нибудь из вас есть идеи?

Answer 1

Вам просто нужно добавить (change) событие к вашему select элементу, как этот

<h1>Warenlieferungen</h1>
<br>
<p>Stadt:</p>
<select [(ngModel)]="selectedCity" (change)="getStreetnames(selectedCity)" class="form-control" style="width: 250px;height: 50px;">
  <option *ngFor="let city of cities" [ngValue]="city">{{city}}</option>
</select>

<table>
  <tr *ngFor="let street of streets">
    <td>{{street}}</td>
  </tr>
</table>