如何在“动态选择组件角”中选择“ select”上的默认值

Question

我正在尝试为我的应用程序创建动态select组件。在我的整个应用程序中，此组件将以各种形式使用。在某些情况下，可能会提供一些预定义值，以提供给select，在这种情况下，该值将根据下拉列表选择为默认值。为了实现此功能，我已经仔细研究过，并找到了各种问题可以回答此问题的问题，但是使用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生命周期钩中的方法，该方法将插入模板中的整个对象提取。生命周期挂钩设置一个称为选择的特定变量，并将其设置为 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

，因此，如果要为选择语句提供任何默认值

假设我在.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>