我有以下基于下拉菜单的下拉菜单代码。
<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>
例如-
第一次如果我从国家/地区选择“美国”,从城市中选择“纽约”。正确传递参数。
第二次如果我将城市更改为“奥斯丁”,其未将“奥斯丁”传递给组件(城市值未更新/更改)。
请帮助/指导。
您的样品工作正常。只需在render.component.html中添加以下代码,即可查看绑定是否正常工作