Question

使用Angular2使用循环将下拉值与1到100之间的数字绑定的最佳方法是什么？

对于有限数量的值，我使用的是Ngprime下拉列表，但是如何为'n'个值实现此目的？

模板：

<p-dropdown [options]="tests" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" editable="editable" placeholder="Select a Brand"></p-dropdown>

组件：

this.tests = [];
this.test.push({label: 'Audi', value: 'Audi'});

任何人都可以指导我吗？

Answer 1

Angular 2中的选项从1到100的下拉列表将是这样的：

在组件中：

export class DropDownClass {
  constructor() {
    this.numbers = new Array(100).fill().map((x,i)=>i); // [0,1,2,3,4,...,100]
  }
}

在模板中：

<select name="my-dropdown" [(ngModel)]="myDropdownModel">
    <option *ngFor="let number of numbers" [ngValue]="number">{{number}}</option>
</select>

Answer 2

工作代码

在模板中：

<label for="percentage">Percentage</label>
  <p-dropdown formControlName="PercentageAbsence" [options]="numbers" [style]="{'width':'200px'}">
  </p-dropdown>

在组件中：

 import { SelectItem } from 'primeng/primeng';
  export class Test{
   numbers: SelectItem[] = [];
   constructor(){
        Array(100).fill(0).map((x, i) => {
        this.numbers.push({ label: `${i + 1}`, value: i + 1 })
    });
  }
}

Answer 3

在组件中:( YourComponent.ts）

export class YourComponent {
itemQuantity = []; // instantiates the object to hold array of numbers

public ngOnInit() {
    this.itemQuantity = Array(5).fill(0).map((x,i)=>i+1); // fills array with 5 incremental entries starting from 1 (hence the "i+1"). To start at zero remove the "+1"
}

}

在模板中:( YourComponent.html）

<option *ngFor="let number of itemQuantity" value="{{number}}">{{number}}</option>

结果是一个下拉列表，其中有五个条目编号为1到5

“value =”{{number}}“是可选的，如果您想为每个选择项目添加不同的文字和值，例如要获得数字1 ，您可以使用数字{{数}}

Answer 4

  public quantities: Array<number> = [];
 getQuantity() {
    for (let i = 1; i <= 100; i++) {
      this.quantities.push(i)
    }
  }


<mat-form-field>
        <mat-select placeholder="QTY">
            <mat-option *ngFor="let quantity of quantities" [value]="quantity">
                  {{quantity}}
            </mat-option>
       </mat-select>
 </mat-form-field>

Angular2：使用'n'数字绑定下拉值

4 个答案: