How to display differing drop-down and item content

As an example, Let's say I have 1,2,3,4,5

I want the drop-down menu to say 'One' but when you select One, I want the text box to display 1 not 'One'

I have an Array with different items for different purposes and rules I just' can't figure out in the mat-select/option where I am going wrong, I can't even properly put the words together to google

Is there something within mat-option or do I need to look to the typescript method?

Thanks

Example code

        <mat-form-field appearance="standard" >
            <mat-select [value]="setInput.rule" (selectionChange)="selectRuleChanged($event)" placeholder="Add Number">
                <mat-option *ngFor="let op of ruleRule"
                            [value]="op.Rule">
                    {{ op.Name }}
                </mat-option>
            </mat-select>
        </mat-form-field>

  static RuleListFull: RuleRule[] = [
    { Category: 'all', Rule: '1', Name: 'One', NameAlt: '1' },
    { Category: 'all', Rule: '2', Name: 'Two', NameAlt: '2' }
];

CodePudding user response：

Use mat-select-trigger.

Example:

<mat-select #select>
  <mat-select-trigger>
    {{ select.value?.NameAlt }}
  </mat-select-trigger>
  
  <mat-option *ngFor="let op of ruleRules" [value]="op.Rule">
    {{ op.Name }}
  </mat-option>
</mat-select>