Question

我在角度4中有一个带有多个选择选项（复选框）的垫子选择

以html

  <mat-form-field>
     <mat-select placeholder="Location" [formControl]="toppings"  [(ngModel)]="locSelected" multiple>
                  <mat-option *ngFor="let topping of loc; let i = index" [value]="topping.value">
                    {{topping.viewValue}}</mat-option>
                </mat-select>
              </mat-form-field>

在ts文件中

 locSelected:Array<string>=[];
        loc= [
        { value: '1', viewValue: 'US' },
        { value: '2', viewValue: 'UK' },
        { value: '3', viewValue: 'Europe' },
        {value:'4',viewValue:'London'},
        {value:'5',viewValue:'France'},
        {value:'6',viewValue:'Italy'},
        {value:'7',viewValue:'Others'} ];

我从WebAPI结果中获取选定的值。我曾尝试使用[[ngModel）]，但无法正常工作。

来自WebApi结果

if(result.locSelectedValue!="" && result.locSelectedValue!=null)
 {
   let location=result.locSelectedValue.split(",");
   for(var i=0;i<location.length;i++)
   {
    this.locSelected.push(loc[i]);
   } 
 }

我将从WebApi获得的结果的格式为：3,5,6

因此应选择值欧洲，法国，意大利复选框。

如何实现这一目标。我刚接触Angular 4。

Answer 1

我认为ng multiselect下拉列表非常适合您的需求。

https://www.npmjs.com/package/ng-multiselect-dropdown

Answer 2

这是我的答案。您可以从Web API获取toppingList。在这里，它是硬编码的。

在您的.html中，

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

在您的.ts中，

export class SelectMultipleExample {
  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

Answer 3

由于您已经在使用[formControl]，所以不需要使用ngModel。从API获取记录后，您可以将值设置为formControl，剩下的就好了。

修改后的代码-

toppings = new FormControl(); //You might have already

if(result.locSelectedValue!="" && result.locSelectedValue!=null)
 {
   let location=result.locSelectedValue.split(",");
   for(var i=0;i<location.length;i++)
   {
    this.locSelected.push(loc[i]);
   } 
  this.toppings.setValue(this.locSelected); //This will update your UI
 }

不要忘记从ngModel中删除html

如何在角度4中将值设置为多个垫选择

3 个答案: