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

Posted

技术标签:

【中文标题】角2材料2中的预填充垫自动完成【英文标题】:prefill mat-autocomplete in angular 2 material 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"

【问题讨论】:

【参考方案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 ---&gt; " + 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'

【讨论】:

以上是关于角2材料2中的预填充垫自动完成的主要内容,如果未能解决你的问题,请参考以下文章

全高弯曲的角材料垫抽屉,内容自动溢出

带有对象代码和描述的角材料自动完成

角材料自动完成不起作用,没有显示错误

防止在角材料设计中自动填充保存的密码

角材料:垫选择不选择默认

如何使用选项组重置材料自动完成中的自定义过滤器