绑定角度级联下拉按钮

Question

当选择第一个下拉列表中的值时，我正在尝试填充第二个下拉列表。

我只想将所选数据从前端发送到后端。当选择第一个下拉列表时，我能够看到第二个下拉列表填充。但是当我开始使用[(ngModel(]="绑定数据时。第二个下拉列表未显示。

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private map = new Map<string, string[]>([
['India', ['Delhi', 'Mumbai','Chennai']],
['USA', ['New York City', 'DC']],
])
country: string;
city: string;
get countries(): string[] {
return Array.from(this.map.keys());
}
get cities(): string[] | undefined {
return this.map.get(this.country);
}
}

app.component.html

<select id="dispositions" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="dispositions" [(ngModel)]="Adddata.dispositions">
<option class="dropdown-item"  *ngFor = 'let country of countries' [value] ="country">{{ country }}</option>      
</select>
<select id="dispositionReasons" class="btn btn-secondary dropdown-toggle"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="dispositionReasons" *ngIf="dispositions" [(ngModel)]="Adddata.dispositionReasons" >
<option class="dropdown-item" *ngFor='let city of cities' [value]="city" > {{ city }} </option>
</select>

Answer 1

您在 AppComponent 中没有任何 AppData，因此 AppData.disposition 将始终为空。像这样更改它：

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private map = new Map<string, string[]>([
['India', ['Delhi', 'Mumbai','Chennai']],
['USA', ['New York City', 'DC']],
])
country: string;
city: string;
AppData: any = {'dispositions': []} ;
get countries(): string[] {
return Array.from(this.map.keys());
}
get cities(): string[] | undefined {
return this.map.get(this.country);
}
}

这应该允许您访问组件中的 AppData 模型。尚未测试过，但请检查并让我知道