mat-select 不改变占位符值

Question

有 mat-select，如果用户选择其中一个单选按钮选项，应该会更改占位符

<mat-select
  *ngIf="!data.loading"
  [placeholder]="form.get('dataType')?.value === 'test' ? 'Test-text' : 'Not-test'"
  formControlName="dataId"
>

出于某种原因，我看到 html 代码中的占位符发生了变化；但这种变化并没有发生在页面本身。价值在 mat-select 字段中保持不变。只有当我点击它才会改变在 mat-select 字段上。

这是为什么？

Answer 1

试试这个方法：

placeholder="{{form.get('dataType')?.value === 'test' ? 'Test-text' : 'Not-test'}}"

Answer 2

听起来您想更改 select 的值，而不是 占位符 。占位符仅在 selected 任何值之前显示。使用 [value] 更改值。您可以从分配给 mat-option 的值中 select。

示例：

<mat-select [value]="someVar ? 'v1' : 'v2'">
  <mat-option value="v1">Value 1</mat-option>
  <mat-option value="v2">Value 2</mat-option>
</mat-select>

如果您想在值被 select 编辑后显示占位符，您需要将 value 设置为 undefined 或 null。您可以通过两种方式将 [(value)] 绑定到一个变量，然后在组件中分配该变量。

<mat-select [(value)]="someVar" placeholder="hi">
  ...
</mat-select>

showPlaceholder() {
  this.someVar = undefined;
}

mat-select 不改变占位符值

mat-select does not change placeholder value

angular-material

angular