角垫选择答案

【问题标题】：Angular mat select角垫选择
【发布时间】：2020-10-18 17:45:21
【问题描述】：

当所选索引为 0 时，即“相同值”，我想传递 0 值而不是文本“相同值”。我们将如何操作数组来做到这一点？谢谢。

因为我需要在 UI 中显示“相同值”文本（请检查图像）作为选项，当用户选择它时，其值为 0

#HTML 组件

<div fxFlex fxLayout="row">
          <mat-form-field appearance="outline" class="pr-4" fxFlex>
            <mat-label>Select Month</mat-label>
            <mat-select formControlName="month_" required>
              <mat-option *ngFor="let month of months;" [value]="month">
                {{month}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>

#TS 组件

export class MonthSelectorComponent implements OnDestroy, OnInit {
  public months     = ["Same Value", 1, 2, 3, 6, 12];

.................

【问题讨论】：

标签： angular typescript

【解决方案1】：

您需要包含提及值和名称的对象的月份数组。

因此，将您的月份数组更新为以下代码：

 public months     = ["Same Value", 1, 2, 3, 6, 12];
  public months     = [{name:"Same Value",value:"0"},
                       {name:"1",value:"1"},
                       {name:"2",value:"2"},{name:"3",value:"3"},{name:"6",value:"6"}, {name:"12",value:"12"}];

您的 HTML 代码应该通过以下代码行更新：

<div fxFlex fxLayout="row">
      <mat-form-field appearance="outline" class="pr-4" fxFlex>
        <mat-label>Select Month</mat-label>
        <mat-select formControlName="month_" required>
          <mat-option *ngFor="let month of months;" [value]="month.value">
            {{month.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

【讨论】：