Question

在执行更新操作时，垫选择未设置所选值。我想在单击更新时显示选定的值，以便其他文本框获得正确的值，但mat-select却没有，如果我将mat-select替换为简单的文本框以使其获得正确的值。

HTML

 <mat-select placeholder="Please Select" name="FD_Financials_year_end_date" #FD_Financials_year_end_date="ngModel"
                  [(ngModel)]="objCompanyFinancialDetails.FD_Financials_year_end_date" class="form-control">
                    <mat-option *ngFor="let date of FinancialYearEndDate" [(value)]="date.id">
                      {{date.value}}
                    </mat-option>
                  </mat-select>

TS

FinancialYearEndDate = [
    { id: "01", value: "01" },
    { id: "02", value: "02" },
    { id: "03", value: "03" },
    { id: "04", value: "04" },
    { id: "05", value: "05" },
    { id: "06", value: "06" },
    { id: "07", value: "07" },
    { id: "08", value: "08" },
    { id: "09", value: "09" },
    { id: "10", value: "10" },
    { id: "11", value: "11" },
    { id: "12", value: "12" },
    { id: "13", value: "13" },
    { id: "14", value: "14" },
    { id: "15", value: "15" },
    { id: "16", value: "16" },
    { id: "17", value: "17" },
    { id: "18", value: "18" },
    { id: "19", value: "19" },
    { id: "20", value: "20" },
    { id: "21", value: "21" },
    { id: "22", value: "22" },
    { id: "23", value: "23" },
    { id: "24", value: "24" },
    { id: "25", value: "25" },
    { id: "26", value: "26" },
    { id: "27", value: "27" },
    { id: "28", value: "28" },
    { id: "29", value: "29" },
    { id: "30", value: "30" },
    { id: "31", value: "31" }
  ];

Answer 1

您可能想检查您尝试绑定到 select 的值，在这种情况下为“ objCompanyFinancialDetails.FD_Financials_year_end_date”，是否存在您的选项

您可能还想用更简单的定义替换垫选择组件：

<mat-select [(value)]='selectedDate'>
   <mat-option></mat-option>
</mat-select>

Answer 2

您应将相同的属性绑定到[(ngModel)]和[(value)]。在您的情况下，[(ngModel)]是日期的完整对象，而[(value)]是该对象的ID。代码应如下所示

<mat-select placeholder="Please Select" name="FD_Financials_year_end_date" #FD_Financials_year_end_date="ngModel"[(ngModel)]="objCompanyFinancialDetails.FD_Financials_year_end_date.id" class="form-control">
                    <mat-option *ngFor="let date of FinancialYearEndDate" [(value)]="date.id">
                      {{date.value}}
                    </mat-option>
                  </mat-select>

Mat Select未获得选定值角度6 TS

2 个答案: