如何在角度 4 中将值设置为多个 mat-select答案

【问题标题】：How to set value to multiple mat-select in angular 4如何在角度 4 中将值设置为多个 mat-select
【发布时间】：2019-03-23 03:44:34
【问题描述】：

我在角度 4 中有一个带有多个选择选项（复选框）的 mat-select

在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 的新手。

【问题讨论】：

从 webapi 获取结果后能否显示this.locSelected 的值。

标签： angular

【解决方案1】：

由于您已经在使用[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
 }

不要忘记从html 中删除ngModel

【讨论】：

【解决方案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'];
}

【讨论】：

感谢您的好回答，只是一个小小的说明，您必须在检索要初始化的数据时添加此行以更新 ts 中的用户界面 this.toppings.setValue(this.toppingList) ;在您的示例中将其添加到 ngOnInit() 中

【解决方案3】：

我认为 ng 多选下拉菜单非常适合您的要求。

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

【讨论】：