Question

我正在使用Angular Material中的多个选择。我能够获取项目的值和检查值（是/否）。我需要创建一个数组，如果该项目为true，则推送；如果该项目为false，则弹出。

我尝试获取布尔值：

html：

<mat-form-field>
     <mat-select multiple placeholder="Select Shows">
          <mat-option (onSelectionChange)="change($event)" *ngFor="let food of foods" [value]="food.value">
                    {{ food.viewValue }}
          </mat-option>
     </mat-select>
</mat-form-field>

.ts：

 change(event)
  {
    if(event.isUserInput) {
      console.log(event.source.value, event.source.selected);
      this.ShowArray.push(event.source.value)
    }
  }

预期输出：

["value1","value2","value3"]; //Inserted at first
["value1","value3"]; //Since the value2 is checked again, so it becomes false.

Answer 1

每当有新输入输入时，便用

进行检查。

 change(event)
      { 
         flag = 0
        if(event.isUserInput) {

          console.log(event.source.value, event.source.selected);
           if(event.source.selected){
               if(!this.ShowArray.includes(event.source.value)){
                this.ShowArray.push(event.source.value)     
           }
           }else{
              this.ShowArray.splice(this.ShowArray.indexOf(eventevent.source.value) , 1);
           }


        }
      }

Answer 2

第一次将事件绑定从选项更改为mat-select，例如：

<mat-form-field>
     <mat-select multiple placeholder="Select Shows" (selectionChange)="change($event)">
          <mat-option  *ngFor="let food of foods" [value]="food.value">
                    {{ food.viewValue }}
          </mat-option>
     </mat-select>
</mat-form-field>

现在像这样更改更改方法：

change(event)
{
      console.log(event.source.value, event.source.selected);
      this.ShowArray = event.source.value;
}

每次更改选择都会发送array个项目，因此您可以直接使用该数组，而无需任何额外的逻辑。

工作示例here

如果其值为false，则弹出一个项目

2 个答案: