Question

最近，我正尝试使用值访问器创建自定义下拉菜单组件，但无法为此下拉菜单设置值。

这部分下拉组件

dnssec-keygen -v3 -G  -n ZONE  -a ECDSAP384SHA384 whitelab.
dnssec-keygen -v3 -G  -n ZONE  -a ECDSAP384SHA384 168.192.in-addr.arpa.

ts部分

    <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select>
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

应用程序组件 HTML：


    @Input() foods:any
    get value(): any {
        return this.innerValue;
      }

      // set accessor including call the onchange callback
      set value(v: any) {
        console.log(v, "v");
        if (v !== this.innerValue) {
          this.innerValue = v;
          this.onChangeCallback(v);
        }
      }

ts：

    <app-input-dropdown [foods]="foods" formControlName="dropdown">
          </app-input-dropdown>

所以这不起作用，我不知道为什么。

Answer 1

我可以想到对您的代码所做的一些更改/添加。首先，您应该更改将值设置为表单的方式：

const valueToSet = { value: "steak-0", viewValue: "Steak" }
        this.myForm.dropdown.patchValue({
    dropdown:valueToSet
    }) ;

执行此操作将产生错误，因为this.myForm.dropdown.patchValue中不应有'dropdown'关键字。它应该是-this.myForm.patchValue。但是即使更正了该问题，设置值的正确方法是：

this.myForm.controls["dropdown"].setValue("pizza-1");

或使用patchValue时：

this.myForm.patchValue({dropdown: 'pizza-1'});

也就是说，要以编程方式更改选择列表的值，您应该基于id而不是对象本身。

下一步是确保自定义控件中有writeValue()方法：

 writeValue(val: string): void {
    this.selectedOption = val;
  }

然后，最后，将selectedOption（或您的情况下的innerValue）绑定到mat-select标记：

  <mat-select placeholder="Favorite food" [(ngModel)]="selectedOption">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

无需更改应用程序组件html中的任何内容。它将仍然使用反应形式：

<app-input-dropdown [foods]="foods" formControlName="dropdown">
          </app-input-dropdown>

如果您仍然遇到问题，可以在Stackblitz中提供示例。请让我知道。

定制材料以反应形式下拉

1 个答案: