javascript - Formbuilder setvalue() 在下拉选择中使用时未按预期工作

Question

Angular 2,4 formbuilder setvalue() 在下拉选择中使用时无法按预期工作。

我有以下由 Github 组织填充的下拉选择:

  <select name="org" formControlName="organizations">
    <option *ngFor="let org of organizations" [ngValue]="org">{{org.organization.login}}</option>
  </select>

这是设置应选择的 Github 组织的 javascript 代码。

  this.pipelineForm = fb.group({
      name:'',
      organizations:'',
      repos: '',
      branches:'',
      runtime:'',
      versions:''
    });

  userService.getOrganizations().subscribe((org:github)=>{
  let organizationName = org.data[0];
   this.organizations = org.data;
      this.projects.subscribe((p)=> {
        p[1].project.subscribe((f)=>{

         this.pipelineForm.get("organizations").setValue(f.organizations, {onlySelf: true});

          //this.pipelineForm.patchValue(f);
        });
      });

    });

当我将值传递给 setValue() 时，我希望选择相应的下拉选项。 .相反，我得到一个空白选项。我也试过 patchValue() .没运气。

Answer 1

我在同样的问题上苦苦挣扎，找到了伊戈尔的答案。它太模糊了，所以我挖了更多。我终于想通了，伊戈尔的答案是正确的，尽管缺乏细节。希望这将有助于将来尝试获得 setValue() 的其他人。在下拉列表和对象模型上愉快地一起工作。

一般对象模型传入setValue()应该与您注入(inject)下拉选择器的对象相同。例如。 if 类型为 Organization ，然后是 setValue也应该是 Organization 类型.但是，没有必要共享完全相同的属性。

获取 setValue()或 patchValue()要使用对象模型(与某些原始类型相反)，请使用 [compareWith]正如伊戈尔指出的那样。

来自 node_modules/@angular/material/select/typings/select.d.ts :

compareWith is a function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned.

在您的 html 模板中，

<select [compareWith]="compareOrgs" name="org" formControlName="organizations">
    <option *ngFor="let org of organizations" [ngValue]="org">{{org.organization.login}}</option>
</select>

在您的 component.ts文件，定义 compareOrgs()功能:

compareOrgs(c1: any, c2: any): boolean {
   return c1 && c2 ? c1.orgId === c2.orgId : c1 === c2; 
}

不要忘记调用 setValue()功能，例如在 ngOnInit()或者如果它是异步的并且您正在获取数据，则在回调函数中。

例如。在上面 OP 代码的回调中，

// "organization" is whatever object you're trying to patch on the dropdown
this.pipelineForm.get("organizations").setValue(organization)

所以这一切的作用是， compareOrgs函数将比较 的值已选择值(这是您传递给 setValue 的对象，现在在 c2 中标记为 compareOrgs )与每个 选项 值( c1)。具体来说，它比较 orgId选定和选项值的属性。这就是 FormControl知道要在下拉列表中预选哪个值。

您现在可以使用 [ngValue] 访问该对象.

这是一个帮助我的好资源: https://codeburst.io/angular-material-select-module-the-comparewith-function-9dfdb4035373