Question

我有一个下拉列表，我正在使用Angule5这样创建DOM结构

<div *ngFor="let dropdownof ListOfDropdown" class="md-form form-lg">
<select name="function">
     <option *ngFor="let option of optionList" value={{option .id}} required>{{option .value}}</option>
</select>
</div>

我在.ts文件中的

我有3个后端服务供您选择。一项服务，没有下拉菜单

 public getCountry(){//some logic} 
 public gettype(){//some logic}
 public getlang(){//some logic}

 public getDropdownList(){//some logic}

现在问题是它正在创建3下拉菜单，但是选项在重复，所有列表中仅显示getlang！请帮助

Answer 1

对于每个下拉列表，它都应该具有数据收集。你可能会有类似的东西：

        private countries: any[];
        private types: any[];
        private langs: any[];

        public dropDowns: any[] = [
              { data: countries },
              { data: types },
              { data: langs },
        ];

并在模板中：

        <div *ngFor="let dropDown of dropDowns" class="md-form form-lg">
         <select name="function">
          <option *ngFor="let option of dropDown.data" value={{option .id}} required>{{option .value}}</option>
         </select>
        </div>

与此相关，您在下拉列表上有一个数组，每个数组都有一个数据数组。那么模板必须仅在dropDown数组上显示每个元素的属性dropDown.data

Answer 2

您可以尝试使用此解决方案

输入*ngFor="let dropdown of ListOfDropdown"和[value]="option.id"的适当的同位符

<div *ngFor="let dropdown of ListOfDropdown" class="md-form form-lg">
<select name="function">
     <option *ngFor="let option of optionList" [value]="option.id" required>{{option .value}}</option>
</select>
</div>

我们如何使用* ngFor循环角度5创建多个动态下拉列表

2 个答案: