使用模态使动态形式成角度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用模态使动态形式成角度相关的知识,希望对你有一定的参考价值。

我对angular有点新,但我正在尝试创建一个动态表单,它将在我的数据库中创建一些字段,这些字段会根据同一模态顶部的下拉选择器而改变。我已经做了一些研究,但我发现的只是完整模块动态形式的帮助,而不是模态。这可能吗?如果是这样,那么开始这项研究的好地方是什么?

答案

实际上,这种类型的特征是Angular的一个非常重要的部分。

为了更好地证明这一点,see this example会根据您选择的国家/地区更改您可以选择的“状态”选项。

重要的部分是模板,它定义了页面的外观和数据的占位符......

<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);
  }
}

以上是关于使用模态使动态形式成角度的主要内容,如果未能解决你的问题,请参考以下文章

角度 5 - 如何从 dom 中删除动态添加的组件

尝试使用 jquery 使模态数据动态化

如何使用角度指令动态地使表单元素只读?

如何拖动Angular动态创建的模态

我该如何做模态对话框片段(代码在我关闭之前不会执行)

选中角度复选框时无法关闭模式