下拉列表更改后组件参数不变

问题描述 投票:0回答:1

我有以下基于下拉菜单的下拉菜单代码。

<select [(ngModel)]="input-country">
  <option *ngFor="let country of countries" [value]="country"> {{ country }}</option>
</select>

<select *ngIf="country" [(ngModel)]="input-city"  (ngModelChange)="updateCity($event)>
  <option *ngFor="let city of cities" [value]="city"> {{ city }} </option>
</select>

然后我将基于选定的选项加载div,并将国家和城市参数传递给组件,像这样

<div *ngIf="city">
    <app-render [country]="country" [city]="city"></app-render>
</div>

app.component.ts

    export class AppComponent {
      private map = new Map<string, string[]>([
        ['Poland', ['Warszawa', 'Krakow']],
        ['USA', ['New York', 'Austin']],
      ])

      country: string;
      city: string;

      get countries(): string[] {
        return Array.from(this.map.keys());
      }

      get cities(): string[] | undefined {
        return this.map.get(this.country);
      }

      updateCity(city){
        this.city = city;
      }

    }

仅是第一次选择获取国家和城市参数。如果我从下拉列表中选择其他选项,则它不会更新国家和城市

试图像这样在app.component.html上查看,此处已更新。

<p>Selected country: {{ country }}</p><br>
<p>Selected city: {{ city }}</p>

例如-

第一次如果我从国家/地区选择“美国”,从城市中选择“纽约”。正确传递参数。

第二次如果我将城市更改为“奥斯丁”,其未将“奥斯丁”传递给组件(城市值未更新/更改)

请帮助/指导。

angular
1个回答
0
投票

您的样品工作正常。只需在render.component.html中添加以下代码,即可查看绑定是否正常工作

© www.soinside.com 2019 - 2024. All rights reserved.