Question

当我尝试编辑记录时，我无法设置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：＆＃34; @ angular / core＆＃34;：＆＃34; ^ 5.0.0＆＃34;，材料：＆＃34; @ angular / material＆＃34;：＆＃34; ^ 5.0.0-rc0＆＃34;，操作系统：Windows 7 打字稿：＆＃34;打字稿＆＃34;：＆＃34; ^ 2.6.2＆＃34;

Answer 1

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

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

}

所以我需要发送一个Object作为回复..我向那些我可能已经窃听过的人道歉..

Answer 2

表格加载后，您只需执行此操作即可。您不需要所有这些超时。

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

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

预成型垫自动完成角2材料2

2 个答案: