Angular 材质：在下拉列表中获取所选值的 id

Posted 2023-03-13

【中文标题】Angular 材质：在下拉列表中获取所选值的 id

【英文标题】：Angular material: get the id of the chosen value in a dropdown

【发布时间】：2019-02-19 02:56:15

【问题描述】：

我有一个从数据表上的编辑按钮打开的材料对话框。

我在“ressursId”上得到未定义，它应该从 patchValue 方法中获取它的值，但它也总是未定义。

同时调用pathcValue() 和使用 [displayWith]="displayFn" 似乎存在问题，因为 displayWith 会覆盖patchValue？我不知道。

所以这里不起作用的是，当我输入输入时，即使我在下拉列表中获得过滤结果，我也应该显示表中的初始值（如果存在，它并不总是存在时）对话框打开）。

更重要的是，我还需要获取所选值的ressursId，因为没有它，我无法发出 PUT 请求来更新数据。

我做错了什么？ Angular 文档太简单了！

部分表单component.html

   <form class="mat-dialog-content" (ngSubmit)="submit()" #formControl="ngForm" [formGroup]="patchForm">

      <div class="form">
          <mat-form-field>
            <input
              matInput
              formControlName="selectedRessurs"
              [matAutocomplete]="auto"
              placeholder="Ressurs"
              [formControl]="ressursControl"
              >
            <mat-autocomplete #auto="matAutocomplete" name="selectedRessurs" [displayWith]="displayFn">
              <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                option.navn 
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
      </div>

还有我的component.ts

export class PatchDialogComponent implements OnInit 

  functiongGroup: FunksjonsGruppe;
  ressurs: Ressurser;

  @Input() prosjektFunksjon: ProsjektFunksjon;
  @Input() ressurser: Ressurser[];
  @Input() prosjFunk: ProsjektFunksjon[];

  // selectedFunksjon: any;
  selectedRessurs: number;
  selectedRessursId: number;
  ressursId: number;
  prosjektId: number;
  selectedRowId: any;
  funksjonsgruppe: any;
  fetchedProsjektFunksjon: ProsjektFunksjon;

  constructor(public dialogRef: MatDialogRef<PatchDialogComponent>,
              private projectService: ProjectService,
              @Inject(MAT_DIALOG_DATA) public data: any
              ) 
              

  formControl = new FormControl('', [
    // Validators.required
    // Validators.email,
  ]);
  ressursControl = new FormControl();
  // options: Ressurser[];
  filteredOptions: Observable<Ressurser[]>;

  patchForm = new FormGroup(
    selectedRessurs: new FormControl(),
    rollenavn: new FormControl(),
    estimertAntallTimer: new FormControl()
  );

  getErrorMessage() 
    return this.formControl.hasError('required') ? 'Required field' :
      this.formControl.hasError('email') ? 'Not a valid email' :
        '';
  

  submit() 
    // empty stuff
  

  onNoClick(): void 
    this.dialogRef.close();
  

  public confirmPut(): void 
    console.log(' 99: ', this.data);
    this.prosjektFunksjon = 
        prosjektFunksjonId: this.fetchedProsjektFunksjon.prosjektFunksjonId,
        estimertAntallTimer: this.patchForm.value['estimertAntallTimer'],
        rollenavn: this.patchForm.value['rollenavn'],
        funksjonId: null,
        funksjonNavn: null,
        subGruppe: null,
        subGruppeId: null,
        gruppe: null,
        gruppeId: null,
        ressursId: this.patchForm.value.selectedRessurs['ressursId'],
        ressursNavn: null
    ;
    console.log('data 101: ', this.data, '\n', ' ProsjektFunksjonsID: ', this.fetchedProsjektFunksjon.prosjektFunksjonId, '\n', ' prosjektFunksjon: ',  this.prosjektFunksjon, );
    this.projectService.updateProjectFunction(this.prosjektId, this.selectedRowId, this.prosjektFunksjon).subscribe();
  

  displayFn(user?: Ressurser): string | undefined 
    return user ? user.navn : '';
  

  private _filter(navn: string): Ressurser[] 
    const filterValue = navn.toLowerCase();
    return this.ressurser.filter(option => option.navn.toLowerCase().indexOf(filterValue) === 0);
    // return this.ressurser.filter(option => option.ressursId.indexOf(filterValue) === 0);
  

  ngOnInit(): void 
    this.data = this.dialogRef.componentInstance;
        this.projectService.getResources().subscribe(r => 
          this.ressurser = r;
          this.ressurser = (this.ressurser || []).sort((a: Ressurser, b: Ressurser) => a.navn.localeCompare(b.navn));
        );

    this.projectService.getProjectFunction(this.prosjektId, this.selectedRowId).subscribe(gpf => 
      // console.log('gpf:  ', gpf);
      this.fetchedProsjektFunksjon = gpf;
      console.log('onit: ', this.fetchedProsjektFunksjon);

      // patchFrom expects an object matching to the formgroup, field by field.
      this.patchForm.patchValue(
        selectedRessurs: this.fetchedProsjektFunksjon['ressursNavn'],
        rollenavn: this.fetchedProsjektFunksjon['rollenavn'],
        estimertAntallTimer: this.fetchedProsjektFunksjon['estimertAntallTimer']
       );
       console.log('After patchValue. fetchedProsjFunk: ', this.fetchedProsjektFunksjon);
    );

    this.filteredOptions = this.ressursControl.valueChanges
      .pipe(
        startWith<string | Ressurser>(''),
        map(value => typeof value === 'string' ? value : value.navn),
        map(navn => navn ? this._filter(navn) : null)
      );

     // @oninit

【参考方案1】：

抱歉，我还没有足够的声誉来添加评论，但我注意到您在输入元素上设置了带有 formControlName="selectedRessurs" 的 [formGroup]="patchForm" 以及绑定到 [FormControl]="ressursControl"。我会假设其中只有一个是有效的，很可能是 ressursControl。至少这是需要检查的东西。

我还发现这些 SO 答案有助于理解 FormGroups 和 FormControls -> What is the difference between formControlName and FormControl?

希望这会有所帮助！

【讨论】：

是的，当我们使用来自父级的数据自动填充输入字段时，添加了 FormGroup，FormControl 已经存在，由同事添加，FormControlName 是获取 FormGroup 的必要部分去工作。我的问题是访问option 的其他属性，因为目前我们只能获取“名称”字段。在该对象中还有一个fooId，我们需要在打字稿文件中使用它，在发送到 API 的 PUT 请求的对象中引用。