时间戳

首页 > 解决方案 > 使用 mat-select 设置默认值：我应该使用 ngModel 还是 value

angular - 使用 mat-select 设置默认值：我应该使用 ngModel 还是 value

问题描述

目标：尝试为下拉菜单设置默认值（基于条件）

问题：当我删除 ngModel 时它不起作用。但是，如果我将其添加回去并删除值，它也不起作用。我认为 ngModel 应该是影响默认值的功能？

我试过的：

我的理解是 [] 做了属性绑定，并允许来自 Typescript 的信息显示在网页（html）上。[()] 允许两种方式绑定。和 [ngModel] 让您从 TypeScript 中获取值并显示它。那么如果你可以使用 ngModel 进行 2 路绑定，那么 value 的目的是什么？

（这里的上下文是一个具有表单的应用程序，在数据库的下拉列表中显示一个值，但允许用户更改该值）。

下面是我的代码的最小示例：

HTML：

<mat-select [(ngModel)]="myRelationship" placeholder="Relationship to You" formControlName="relationship" required>
    <mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
        {{ rel.viewValue }}
    </mat-option>
</mat-select>

如果您的 javascript 对象数组具有相同的值但不同的 viewValues，则默认值不起作用，例如：

relationships = [

{value: Cousin, viewValue: Primo },

{value: Cousin, viewValue: Prima } ]

条件逻辑

if (this.individual.Relationship.startsWith('Cousin')) {
  if (this.individual.Gender == 'M') {
      this.relations[indexCousin].viewValue = "Primo";
      this.relations.push({ value: 'Cousin', viewValue: "Prima" });
  }
}

标签： angularangular-materialangular-ngmodel

解决方案

ngModel您不应该formControlName在mat-select. 其中之一就足够了。要设置默认值，您可以使用元素[value]上的属性。mat-select您目前仅在mat-option.

<mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
    {{ rel.viewValue }}
</mat-option>

value此模板的目的是设置选择选项value时mat-select将具有的内容。上有一些output事件mat-select将为您提供所选选项的值。例如selectionChange。

每个都有一个 value 属性，可用于设置用户选择此选项时将选择的值。的内容是向用户显示的内容。

如果要设置默认value值mat-select。您可以使用[value]，但这会在mat-select组件上进行。

<mat-select [value]="myRelationship" placeholder="Relationship to You" required>    
  <mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
    {{ rel.viewValue }}
  </mat-option>
</mat-select>

请注意formControlName已删除

您可以使用，formControlName但您必须确保formControl在您的组件中给定了一个值。

<mat-select placeholder="Relationship to You" formControlName="relationship" required>
       <mat-option *ngFor="let rel of relations" [value]="rel.value" (click)="selectRelationship(rel.value)">
              {{ rel.viewValue }}
       </mat-option>
</mat-select>

设置值的方式formControl将取决于它在组件中的实例化方式。

推荐阅读