Question

我正在使用Angular8反应形式。我正在创建一个表单，该表单必须通过ID预载所选项目的详细信息。通过将现有Item值传递给FormControl（）方法，可以在窗体中显示Item的详细信息。这部分都正常工作。

但是，如果该选项由于稍后变为“非活动”状态而被滤除，则该问题能够显示默认值。

问题：如何填充选择选项数组中不再存在的默认值？

示例：

“项目”表单具有一个“项目”选择框，该选择框显示了数据库中的项目列表。

数据库查询仅返回“活动”项目。项目是具有_id，ProjectName和Inactive属性的对象。

// item.project
{"_id":"5d0699380a29581928374651",
"ProjectName":"Server upgrade to version 10",
"Inactive":0}

将_id设置为值，将ProjectName设置为显示值。

<mat-form-field appearance="outline" floatLabel="always" class="width-50p">
  <mat-label>Project</mat-label>
  <mat-select formControlName="Project">
    <mat-option *ngFor="let project of projects" [value]="project._id">
      {{project.ProjectName}}
    </mat-option>
  </mat-select>
</mat-form-field>

“项目”表单控件设置为现有项目。默认为_id。

只要由于以后将其设置为非活动状态而没有将项目过滤掉，此方法就可以使用。

// Initialize form controls
this.itemForm = new FormGroup({
  // other item properties...
  'Project': new FormControl(item.project._id),
});

如何将默认值设置为选择选项中不再存在的选项？

也许我可以先获取项目值，然后将其附加到options数组，然后在表单控件中设置默认值。

Answer 1

您始终可以将新选项添加到垫选中。但是首先需要创建一个像（*）

的函数

find(data:string)
{
   return this.projects.find(x=>x._id==data)
}

所以你可以做些类似的事情

<mat-select formControlName="Project">
    <mat-option *ngFor="let project of projects" [value]="project._id">
      {{project.ProjectName}}
    </mat-option>

    <mat-option *ngIf="item?.project?._id && !find(item.project._id)
                [value]=item.project._id>{{item.ProjectName}}
    </mat-option>

</mat-select>

（*）这是必需的，因为您不能在.html中使用类似find(x=>x._id==data)

Answer 2

由于接受了答案，因此我能够创建一个非常相似的解决方案。唯一的区别是检查选项是否存在于TS组件中。在将现有记录值推送到数组之后，将创建选择选项。

firefox quantum 66.0.3
geckodriver-0.24.0-win64.exe

HTML与以前相同。

  /**
   * Check if a value on record exists as a select box option already
   * A value on an existing record does not appear in select options if it is 'inactive'
   * Return true if the select option exists already
   * Return false if the select option does not exist already
   * @param {string} recordValue value on record
   * @param {array} options options array to check for the value e.g. projects
   * @param {string} optionsField field to check on the options array e.g. _id
   */
  private checkOption(recordValue: string, options: any, optionsField: string): any {
    const matchingOption = options.find(option => option[optionsField] == recordValue);
    return matchingOption ? true : false;
  }

/* Get select options */
// Get projects options from database
let projectsOptions = results[1].data.filter(project => project.ProjectName);

// Check if existing record has a selected project
if (project_id) {
  // Check if project value on record exists as a select box option already
  const projectOptionExists = this.checkOption(this.record.Project_id._id, projectsOptions, '_id');
  // If project on record is not available as an option in select box already
  if (!projectOptionExists) {
    // Add project on record to projects select options array
    projectsOptions.unshift(this.record.Project_id);
  }
}

角度选择选项隐藏不活动状态，但仍显示历史价值

2 个答案: