如何在動態選擇組件角度中的選擇上設置默認值

Question

我正在嘗試為我的應用程序創建一個動態select組件。 在整個應用程序中，將以各種形式使用此組件。 在某些情況下，可能會有一些預定義的值可以提供給select ，在這種情況下，下拉列表會將值選擇為默認值。 為了實現此功能，我查看了SO並找到了可以解決此問題的各種問題，但是我使用NgModule作為添加默認值的指令，而我正在為組件使用formControlName 。 我自己嘗試了一種解決方案（下面添加了代碼），但似乎沒有用。 我不願意將ngModule與formControlName一起使用，因為該功能已在Angular 6（我使用的版本）中棄用。 如何實現功能？

component.html

<div [formGroup]="group">
  <select id="{{ id }}" formControlName="{{ formControlName }}" class="form-control">
      <option value="" disabled selected>{{placeholder}}</option>
      <option *ngFor="let item of data" [ngValue]="item.id">{{item.name}}</option>
  </select>
</div>

component.ts

import { Component, ViewEncapsulation, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss'],
  encapsulation: ViewEncapsulation.None
})
/**
* This class is used to create a generic dropdown component. Population is done on runtime
*/
export class DropdownComponent{
  /**
  * Define FormGroup
  */
  @Input() group: FormGroup;

  /**
  * Define formControlName
  */
  @Input() formControlName: string;

  /**
  * Define id
  */
  @Input() id: string;

  /**
  * Define data
  */
  @Input() data: any;

  /**
  * Define placeholder
  */
  @Input() placeholder: string;

  /**
  * For any predefined value being passed
  */
  @Input() predefined: string;

  constructor() { }

}

我嘗試了什么（ts文件保持不變）

<div [formGroup]="group">
  <select id="{{ id }}" formControlName="{{ formControlName }}" class="form-control">
    <ng-template *ngIf="predefined !== undefined; else default">
      <option *ngFor="let item of data" [selected]="item.id === predefined">{{item.name}}</option>
    </ng-template>
    <ng-template #default>
      <option value="" disabled selected>{{placeholder}}</option>
      <option *ngFor="let item of data" [ngValue]="item.id">{{item.name}}</option>
    </ng-template>
  </select>
</div>

Answer 1

為了解決該問題，解決方案是在OnInit生命周期掛鈎中定義一個方法，該方法將整個對象提取並插入到模板中。 生命周期掛鈎設置了一個名為selection的特定變量，並設置為formControl ：

selection: any

ngOnInit() {
    if (this.predefined !== undefined) {
      let index = Object.keys(this.data);
      var self = this;
      index.forEach(function(i) {
        Object.keys(self.data[i]).some(function(k) {
          if (self.data[i][k] === self.predefined) {
            self.selection = self.data[i];
            return self.data[i][k];
          }
        }
        )
      });
      this.group.controls[this.formControlName].setValue(this.selection.id, { onlySelf: true });
    }
  }

模板不需要進行任何修改，就像我在問題的更新中所做的那樣，因此恢復為之前的版本：

<div [formGroup]="group">
  <select id="{{ id }}" formControlName="{{ formControlName }}" class="form-control">
      <option value="" disabled selected>{{placeholder}}</option>
      <option *ngFor="let item of data" [(ngValue)]="item.id">{{item.name}}</option>
  </select>
</div>

Answer 2

因此，如果您想為select語句提供任何默認值，則可以執行以下操作，

假設我在.ts中有這個對象數組

 Sports = [
 {
    "name": "running",
    "value" : "0"
 },
 {
    "name": "triathlon",
    "value" : "1"
 }
]

您可以像下面這樣在html中為select語句設置默認值，

<select class="form-control" (change)="get($event.target.value)">
   <option [value]="null" hidden>
      Select
   </option>
   <option *ngFor="let sport of Sports" [value]="sport.value">
      {{sport.name}}
   </option>
</select>