Почему мои значения выбора материала удаляются, когда я делаю выбор?

Question

Я пытаюсь использовать элементы формы Angular Material. У меня есть коврик. Когда я выбираю опцию, значения удаляются, но варианты все равно отображаются. Например, я выкидываю значения формы на экран, чтобы наблюдать за поведением. Когда я выбираю опцию, сброшенные значения на экране исчезают, но варианты по-прежнему отображаются в раскрывающемся списке. Странно то, что это работает, если я заменю mat-select на native select. Есть мысли о том, что я делаю неправильно?

Я заменил mat-select на native select. Это работает с этим, но не имеет весь дизайн материала, который я хотел бы. Я не смог заставить его работать в соответствии с документами с mat-select.

// This does not work and clears out when an option is selected
<mat-form-field>
    <mat-label>Pay Category</mat-label>
    <mat-select formControlName="payCategory">
        <mat-option *ngFor="let payCategory of payCategories"
                    [ngValue]="payCategory">
          {{payCategory.description}}
        </mat-option>
    </mat-select>
</mat-form-field>

// This works, but removes some of the material design styling
<mat-form-field>
    <mat-label>Pay Category</mat-label>
    <select matNativeControl
            formControlName="payCategory">
        <option *ngFor="let payCategory of payCategories"
                [ngValue]="payCategory">
          {{payCategory.description}}
        </option>
    </select>
</mat-form-field>

// In case you wish to see the component relevant code, this is the FormControl...
payCategory: new FormControl( this.buildPayCategories() )

// Pull in payCategories for select list from service
  buildPayCategories () {
    this.payCategories = this.timeEntry.payCategories;
    return this.payCategories;
  }

Я бы предпочел использовать mat-select, чтобы использовать преимущества стилевого дизайна материала, а не просто очистить выбранное значение.

// buildPayCategories returns an array of objects. Here is a sample...
0: {payCategoryId: 1, description: "Converted Data ", payType: "Salary", isActive: true}

Answer 1

Я пытался воспроизвести вашу проблему, но у меня это работает.

За исключением того, что вместо [ngValue] я использую [value].Вы можете найти здесь на Stackblitz, рабочий пример, надеюсь, это поможет.

Редактировать На основе вашего обновления:

  public options = [
    {payCategoryId: 1, description: "Converted Data ", payType: "Salary", isActive: true},
    {payCategoryId: 1, description: "Something Else ", payType: "Salary", isActive: true}
  ];
  public selected = this.options[0];
  public payCategory =  new FormControl(this.options)

и шаблона:

<mat-form-field>
    <mat-label>Pay Category</mat-label>
    <mat-select formControlName="payCategory" [(value)]="selected">
        <mat-option *ngFor="let payCategory of options"
                    [value]="payCategory">
          {{payCategory.description}}
        </mat-option>
    </mat-select>
</mat-form-field>

<p>You selected: {{selected.description}}</p>

Работает просто отлично, взгляни!

Удачи!