Действительно, этот тип функции является очень важной частью Angular.
Для хорошей демонстрации этого, см. Этот пример , который меняет параметры, которые "Штаты" вы можете выбрать в зависимости от выбранной страны.
Важными частями являются шаблон, который определяет внешний вид страницы и заполнителей для данных ...
<label>Country:</label>
<select [(ngModel)]="selectedCountry.id" (change)="onSelect($event.target.value)">
<option value="0">--Select--</option>
<option *ngFor="let country of countries" value= {{country.id}}>{{country.name}}</option>
</select>
<br/><br/>
<div>
<label>State:</label>
<select>
<option value="0">--Select--</option>
<option *ngFor="let state of states " value= {{state.id}}>{{state.name}}</option>
</select>
</div>
... и контроллер, который определяет , какие данные должны быть показаны. Когда вы делаете щелчок в шаблоне, данные в контроллере манипулируются
export class AppComponent implements OnInit {
name = 'Angular 5';
selectedCountry: Country = new Country(2, 'Brazil');
countries: Country[];
states: State[];
constructor(private selectService: SelectService) { }
ngOnInit() {
this.countries = this.selectService.getCountries();
this.onSelect(this.selectedCountry.id);
}
onSelect(countryid) {
this.states = this.selectService.getStates().filter((item) => item.countryid == countryid);
}
}