如果项目的值为 false，则弹出项目

Question

我正在使用来自 Angular Material 的多重选择。我能够获取项目的值和检查值（真/假）。我需要创建一个数组，如果该项为真则推送，如果该项为假则弹出。

我已经尝试获取布尔值：

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

第一次将事件绑定从选项更改为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

Answer 2

每当有新的输入出现时，用

检查它

 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);
           }


        }
      }