mat-select binding with two columns-CodePudding

I've a list of products and I'm trying to bind two bind with two columns.

HTML:

  <mat-form-field appearance="outline">
    <mat-label>Product</mat-label>
    <mat-select formControlName="pid">
      <mat-option value="">-all-</mat-option>
      <mat-option *ngFor="let row of ds.listProduct" [value]="row.code"> 
       {{row.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

The below code it is working, but I want to bind one column more, like this: [value]="row.code" && myCategory="row.category"
myCategory is a variable in my TS.

Is it possible and how can I get it?

CodePudding user response：

~~You can add the other field in the same [value] using the && operator if you want both the conditions to be true~~

Since you want to display mat-option only for category FUEL. You'll have to use *ngIf to hide the rest of the options.

We'll have to move our *ngFor to <ng-container> as we cannot have multiple template bindings on a single container. To help us add *ngIf on mat-option.

Your code should look something like this:

<mat-form-field appearance="outline">
   <mat-label>Product</mat-label>
   <mat-select formControlName="pid">
     <mat-option value="">-all-</mat-option>
     <ng-container *ngFor="let row of ds.listProduct">
        <mat-option [value]="row.code" *ngIf="row.category === 'FUEL'"> 
           {{row.name}}
        </mat-option>
     </ng-container>
   </mat-select>
 </mat-form-field>

Note I used row.category === 'FUEL' in the *ngIf, you can use the myCategory instead of FUEL if you are setting in the .ts component