Mat-select входной составной объект

Question

Я изо всех сил пытаюсь ввести составное значение в выбор. Допустим, наш объект содержит только идентификатор и имя , обычный способ иметь рабочий выбор - это сделать:

      <mat-form-field>
   <mat-label>Placeholder</mat-label>
   <mat-select>
      <mat-option *ngFor="let i of fooCollection" [value]="i.id">
         {{i.name}}
      </mat-option>
   </mat-select>
</mat-form-field>

Теперь, чтобы передать значение, я нашел этот рабочий пример в документации, который просто добавляет [(value)] вариант в mat-select тег, но поскольку у нас здесь составной объект, он больше не работает.

Есть идеи, как это решить? Большое спасибо ! Кев '

Answer 1

Взгляните на это: Машинопись:

            /** @title Select with 2-way value binding */
  @Component({
    selector: 'select-value-binding-example',
    templateUrl: 'select-value-binding-example.html',
  })
  export class SelectValueBindingExample {

  myOptions = [
    new MyOptions('name1','description1' ),
    new MyOptions('name2','description2' ),
    new MyOptions('name3','description3' ),
  ]


  selectedOption = this.myOptions[2]

  }//Cls

  //-----------------------------------------------------//

  class MyOptions{
    constructor(
      public name:string,
      public description:string
    ){}
  }

HTML:

                <mat-form-field appearance="fill">
      <mat-label>Select an option</mat-label>
      <mat-select [(value)]="selectedOption">
        <mat-option *ngFor="let myOption of myOptions" [value]="myOption">
          {{myOption.description}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <p>You selected: {{selectedOption|json}}</p>

Когда вы добавляете строку <mat-select [(value)]="selectedOptionName"> он будет "собирать" все, что когда-либо входило в [значение] в этой строке <mat-option *ngFor="let myOption of myOptions" [value]="actualValueGoesHere">. И вы можете изменить значение, как хотите.

Чтобы установить начальное значение, просто установите selectedOption = this.myOptions[2](или что угодно, что должно быть первым выбором)