预填充垫 - 自动完成 Angular 2 材料 2

Question

当我尝试编辑记录时，我无法设置

mat-autocomplete

的值 我使用自动完成功能作为

FormControl

对象中的

FormBuilder

对象，并设置从我正在使用的服务器接收的值

Formbuilder.setValue()

方法，但这不会设置自动完成，尽管它会向服务器发送请求，因为我正在使用 Observables 的

valueChanges

方法...任何帮助将不胜感激。

以下是我正在使用的代码：

组件.ts

this.filteredData = this.addDetailsForm.get('product').valueChanges
    .debounceTime(400)
    .do(value =>
    { 
        let exist = this.myContent.findIndex(t => t.text === value);
        if (exist > -1) return;
        this._dataService.getSwiftProducts(value)
            .subscribe((res: any[]) => { this.myContent = res; });
    }).delay(500).map(() => this.myContent);

组件.html

<div class="row">
    <label class="col-lg-4 control-label">Product: </label>
    <div class="col-lg-5">
        <input type="text" class="form-control" 
            (keyup.enter)="chooseFirstOption()" 
            placeholder="Pick one" aria-label="Number" 
            matInput ="product" formControlName="product" 
            [matAutocomplete]="auto">
        <p *ngIf="addDetailsForm.controls.product.errors">
            This field is required!
        </p>
        <mat-autocomplete #auto="matAutocomplete" 
            [displayWith]="displayFn">
            <mat-option *ngFor="let option of filteredData | async" 
                [value]="option">
                {{ option.description }}
            </mat-option>
        </mat-autocomplete>
    </div>

Angular、Material、OS、TypeScript 的版本：

Angular : "@angular/core": "^5.0.0",

Material : "@angular/material": "^5.0.0-rc0",

OS: Windows 7

Typescript : "typescript": "^2.6.2"

Answer 1

经过大量研究，甚至激怒了 Angular Material 的开发团队，我意识到我在尝试编辑记录时发送的响应是不正确的。我发送了一个字符串作为自动完成的响应，而它应该是一个对象。这实际上取决于

displayFn

函数的编写方式。

以下是我的

displayFn

功能：

displayFn(object): string {
    console.log("Display Object is ---> " + object);
    return (typeof(object) !== 'string') ? object.description : object;
}

所以我需要发送一个对象作为响应。我向可能被我打扰的人道歉。

Answer 2

您只需在表单加载后执行此操作即可。 您不应该需要所有这些超时。

this.formControls.get('controlName').setValue(option.value);

1. 将“formControls”替换为 formBuilder 组的名称（不确定代码中的名称是什么，因为您没有提供该名称）
2. 将“controlName”替换为输入控件的名称（在您的情况下为“产品”）
3. 将“option.value”替换为您想要预填充自动完成功能的任何内容。这需要是一个字符串值。

Answer 3

注意

如果您的自动完成功能池中来自服务器或任何异步函数的数组中的值，请确保仅在该数组初始化后尝试设置默认值。例如，如果您要从服务器获取产品名称列表，请等待产品列表初始化。之前设置的默认值将不会保留。它甚至可能会抛出更改检测错误。

解决方案

使用 formControl.patchValue() ，或者如果这不起作用，请使用 viewChild 选择输入元素并显式设置 value 属性。

@ViewChild('inputTempRef', {static: false}) myInput: ElementRef;

最后当你的数组初始化时，执行以下操作：

myInput.nativeElement.value = 'presetValue'

Answer 4

我遇到了同样的问题，这段代码帮助了我：

displayWithSector(sector: Setor): string {
  return typeof sector !== 'string' ? sector.description : sector;
}

Answer 5

由于我的数据来自父组件，因此我制作了 2 个表单控件 - 一个用于自动完成，一个用于/来自父组件。因此，当父级更改 fc 时，我只需将其设置为子级中的正确类型 (

Reason

)，这是我从原因数组中找到的：

  @Input() fc: FormControl<number>;

  autocompleteControl: FormControl<string | Reason | null> = new FormControl<string | Reason>('');

  ngOnChanges(changes: SimpleChanges): void {
    if (changes && changes['fc'] && changes['fc'].currentValue.value) {
      const preSelectedReason = this.reasons.find((r) => r.id === changes['fc'].currentValue.value);

      if (preSelectedReason) this.autocompleteControl.setValue(preSelectedReason);
    }
  }