如何为垫子自动完成设置默认值答案

【问题标题】：How to set default values for mat autocomplete如何为垫子自动完成设置默认值
【发布时间】：2019-10-06 01:32:04
【问题描述】：

我在一个页面上有多个自动完成功能，并且能够选择值并保存它们。我需要的是，当我下次加载页面时，默认情况下应该为已经选择并保存的值显示预先选择的值。

下面是代码sn-p -

<ng-container matColumnDef="course">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Course Section </th>
      <td mat-cell *matCellDef="let course"> {{course.courseSection}}
      <mat-form-field>
          <input type="text" id="{{course.courseSection}}" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
            [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChanged(course.courseSection, $event)">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </td>
    </ng-container>

在 ngOnInit 上，我能够获取保存在地图中的值，并且使用了以下不起作用的逻辑 -

checkAssigned(section: string) {
    if (this.assigned.has(section)) {
      return this.assigned.get(section);
    } else {
      return '';
    }
}

HTML -

<mat-option *ngFor="let option of filteredOptions | async" 
[value]="checkAssigned(course.courseSection)===''? option : checkAssigned(course.courseSection)">

但它不起作用。关于如何实现它的任何建议？

【问题讨论】：

您可以使用 FormControls 的 setValue 方法在 ngOnInit() 挂钩上设置先前选择的值（如果有）
如何做到这一点，因为这里有一个动态生成的自动完成列表？

标签： angular angular-material mat-autocomplete

【解决方案1】：

对于设置值，它应该类似于您在 matAutoComplete 列表中使用的格式。

假设你正在使用myNameList = [{name:"My Name",id:1},{name:"My name 2",id:2}]

然后为此，您需要设置值

this.myformName.controls['myControl'].setValue({name: "My Name", id:1}); //Working Code

如果你这样设置，它会设置默认值

this.myformName.controls['myControl'].setValue("My Name"); //Not working code

那就不行了。

请查看此以供参考https://stackblitz.com/edit/angular-8r153h-kpwhaa?file=app/autocomplete-display-example.ts

【讨论】：