Mat-select 输入组合对象

Question

我正在努力将组合值输入到选择中。假设我们的对象只包含一个 ID 和一个 name，通常的选择方法是：

<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>

现在要输入一个值，我发现 this working example in the documentation 只是在 mat-select 标记中添加了一个 [(value)] 选项，但是由于我们在这里得到了一个组合对象，所以它不再起作用了。

关于如何解决这个问题的任何想法？非常感谢 ！ 凯夫'

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] （或者应该是什么第一选择）