角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 ---> " + 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中的预填充垫自动完成的主要内容,如果未能解决你的问题,请参考以下文章