角2材料2中的预填充垫自动完成答案

【问题标题】：prefill mat-autocomplete in angular 2 material 2角2材料2中的预填充垫自动完成
【发布时间】：2018-06-29 03:21:37
【问题描述】：

当我尝试编辑记录时，我无法设置mat-autocomplete 的值我将自动完成功能用作FormBuilder 对象中的FormControl 对象并设置从服务器接收的值我我正在使用 Formbuilder.setValue() 方法，但这并没有设置自动完成，尽管它向服务器发送了一个请求，因为我正在使用 Observables 的 valueChanges 方法......任何帮助将不胜感激。

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

component.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);

component.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"

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

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

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

}

所以我需要发送一个对象作为响应。我向我可能已经窃听的人道歉..

【讨论】：

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

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

注意

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

解决方案

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

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

最后，当你的数组被初始化时，这样做：

myInput.nativeElement.value = 'presetValue'

【讨论】：