Angular 角度：从基于mat选择的id获取值

我正在创建一个带有多个下拉菜单（mat select）的动态表单。选择的值是键。用户选择所有下拉列表后，我希望显示所选的值。然而，由于select只包含关键，而不包含价值，我对如何显示我的目标感到困惑

选项1-使用id作为值绑定

    <mat-form-field appearance="fill" *ngSwitchCase="'dropdown'" class="w-75">
      <mat-label>{{question.label}}</mat-label>
      <mat-select [formControlName]="question.key">
        <mat-option *ngFor="let opt of question.options" [value]="opt.key">
          {{opt.value}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="!isValid">
        {{question.label}} is required
      </mat-error>
    </mat-form-field>

关于如何解决这两个选项中的任何一个，有什么建议吗？我真的希望避免编写html调用以获取值的通用函数。（就像在ts doing Array.filter中一样…）

---

谢谢

您可以使用此选项添加默认值以选择自身。请注意，您正在将默认值绑定到父mat select元素

 <mat-select [value]="defaultOpt" formControlName="question.key">
           <mat-option *ngFor="let opt of question.options" [value]="opt">
            {{opt.value}}
           </mat-option>
 </mat-select>

{{opt.value}}

---

通过这种方式，您可以设置默认值并接收所需的输入。

首先，为您的选项对象创建一个比较函数：

  compareOptions(option1: Option, option2: Option) {
    return option1.key === option2.key;
  }

然后将此功能提供给mat select：

<form [formGroup]="form">
  <mat-form-field appearance="fill" class="w-75">
    <mat-label>Question</mat-label>
    <mat-select formControlName="question" [compareWith]="compareOptions">
      <mat-option *ngFor="let opt of options" [value]="opt">
        {{opt.value}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

---

或者，您可以使用ID在数组中找到该选项，并将表单控件值设置为该值。由于它是相同的对象引用，因此不需要比较函数：

 this.form.get('question')?.setValue(this.options.find(opt => opt.key === 3));

---

你好，乌萨林！你说我现在应该设置默认值是什么意思？请记住，mat select是在*ngFor中创建的，因此它将创建大约10个dropdownsdefaultOpt，这与您传递给*ngFor-question.options的值不同。该控件的select数仍将相同-只创建1个select项。嵌套的mat选项可以是10个或更多。您应该向defaultOpt传递一个默认选项对象（带有所需的键和值），而不是*ngFor指令中的选项列表。如果您愿意，您可以将其设置为更通用的，如传递问题。选项[0]。否，我想您没有注意到我在ngFor之外有一个div用于添加多个下拉列表（mat select）。这样，我就不能有一个静态变量“defaultOpt”，因为它会更改所有不同的下拉列表。例如，一个下拉列表用于国家/地区，一个用于性别等。是否可以为问题对象添加默认或选定的属性？使用对象作为值，但为mat-select.Hi@robbieAreBest的“compareWith”输入提供一个函数！我真的试过了，但运气不好。有没有关于如何实施的建议？我已经添加了一个更全面的解释，因为答案很有魅力。非常感谢。

<form [formGroup]="form">
  <mat-form-field appearance="fill" class="w-75">
    <mat-label>Question</mat-label>
    <mat-select formControlName="question" [compareWith]="compareOptions">
      <mat-option *ngFor="let opt of options" [value]="opt">
        {{opt.value}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

this.form.get('question')?.setValue({key: 3, value: 'Country 3'});

 this.form.get('question')?.setValue(this.options.find(opt => opt.key === 3));