Question

抱歉，当我打开“对话框模型表单”时，很难在下拉列表中设置默认的选定选项。

我有两个模型

部门
员工

我还有两个组件，即employee和employee-list，employee-list组件负责加载表中的所有employee列表，而employee组件负责加载singe员工。.

在员工列表中，我设置了单击事件，该事件会调用编辑功能，并在表单中填充选定的行以进行编辑。.但是当表单opne与选择选项一起打开时，它没有出现，我不知道为什么。

employee.ts

  dept: any;

     ngOnInit() {
      this.loadAllDept();
      this.selected = this.employeeService.form.get('department').value;
      }

    loadAllDept(){
        this.employeeService.getAllDepartments().subscribe(
          data => {
            this.dept = data;
          }
        );
      }

还有我的employee.html

    <mat-grid-tile>
      <div class="reg-control-container">
        <mat-form-field>
          <mat-select [(value)]="selected"  formControlName="depatment" placeholder="Class">
            <mat-option>None</mat-option>
            <ng-container>
              <mat-option *ngFor="let d of dept" value="{{d.id}}"> {{ d.name }}</mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>

，但未将默认值设置为下拉列表。

就像下面的图片所示，我可以同时输出默认选中项和选项列表，但我无法设置它。

as shown below

Answer 1

看看这个例子，https://stackblitz.com/edit/angular-5short

请记住，您需要使用Angular提供的属性绑定语法来绑定选项的值，将要为其分配值的属性括在方括号（[]）中。这样，只要将相同的值传递给所需的FormControl，它就应该正确应用默认选项。

Angular 8反应形式，设置默认选定选项

1 个答案: