Angular select 选项隐藏非活动但仍显示历史价值

Question

我正在使用 Angular8 响应式表单。我正在创建一个表单，该表单必须按 ID 预加载 selected 项目的详细信息。通过将现有的 Item 值传递给 FormControl() 方法，可以在表单中显示 Item 的详细信息。这部分工作正常。

但是，如果该选项由于稍后 "inactive" 而被过滤掉，则问题是能够显示默认值。

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

示例：

项目表单有一个 select 框 "Project"，显示数据库中的项目列表。

数据库查询 returns 仅限 "active" 个项目。项目是具有属性 _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>

'Project' 表单控件默认设置为现有 project._id。

只要项目没有被过滤掉，这就会起作用，因为稍后会被设置为不活动。

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

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

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

Answer 1

您随时可以向 mat-select 添加新选项。但是你需要先做一个像（*）

这样的函数

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 组件中。 select 选项是在将现有记录值推送到数组后创建的。

  /**
   * 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);
  }
}

HTML和之前一样

<mat-form-field appearance="outline">
  <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>

Angular select 选项隐藏非活动但仍显示历史价值

Angular select options hide inactive but still show historic value

angular

angular-forms

angular8