Question

我创建了一个表格来编辑表中的数据。表单的几个字段是从数据库中其他表填充的下拉列表（mat-select）。我正在成功填充下拉列表（mat-select），但是我正在努力设置所选值以匹配用户打算编辑的行中的数据。

我实际上有一个对话框正在工作，但是由于某种原因，一个更复杂的对话框（带有3个下拉菜单）不起作用。我最初只是设置ngModel，但是我添加了[comparewith]以期解决问题或了解更多信息。我的compare方法总是收到第二个参数的空值。

certificationEdit.dialog.html：

       <div class="form">
            <mat-form-field>
                <mat-label>Connector - {{m_connectorid}}</mat-label>
                <mat-select [(ngModel)]="m_connectorid" [value]="m_connectorid" [compareWith]="compareConnector" required>
                    <mat-option *ngFor="let item of connectorList" [value]="item.id"> {{item.connector}} ({{item.id}}) </mat-option>
                </mat-select>
            </mat-form-field>
        </div>

certificationEdit.dialog.component.ts：

export class CertificationEditDialogComponent {

  connectorList = [];
  m_connectorid: string;

  ngOnInit() {

    this.databaseService.loadConnectorList().subscribe(response => {

      this.connectorList = response as any[];
    });

  }

  compareConnector(obj1: string, obj2: string) {
    return obj1 === obj2;
  }

  constructor(
    public dialogRef: MatDialogRef<CertificationEditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: CERTIFICATION,
    public databaseService: DatabaseService
  ) {
    this.m_connectorid = this.data.connectorid;
   }

打开编辑对话框的代码：

    public CertificationStartEdit(
        i: number,
        id: string,
        releaseid: string,
        productid: string,
        connectorid: string,
        certtype: string,
        driverversion: string,
        certdate: string,
        changeneeded: string,
        comments: string
    ) {
        //this.release = release;
        this.index = i;
        const dialogRef = this.dialog.open(CertificationEditDialogComponent, {
            data: {
                id: id,
                releaseid: releaseid,
                productid: productid,
                connectorid: connectorid,
                certtype: certtype,
                driverversion: driverversion,
                certdate: certdate,
                changeneeded: changeneeded,
                comments: comments
            }
        });

标签显示m_connectorid具有我期望的值，并且下拉列表显示用于该值的id具有我期望的值。尽管如此，我未选择期望的值。

Answer 1

您不应该同时绑定ngModel和value-在您的情况下，ngModel仅使用一个，因为您使用的是模板表单（如果使用反应性表单，请使用{{1} }或formControl）。

由于formControlName /表格，使用ngModel来确定所选内容可能不起作用。我不确定这是一个错误还是不是设计成这样的错误。相反，您应该使用MatSelect.value（单选）或仅使用绑定变量MatSelect.selected.value或m_connectorid。

为什么<mat-select>在加载时没有选择指定的值？

1 个答案: