Angular Material 占位符不适用于@Input

Question

我正在使用 angular 材料。在父组件中我有

<app-multiselect 
    [optionsList]="propertyTypeList"
    [multiple]=true
    [placeholder]="Select"
    ></app-multiselect>

在 .ts 文件的子组件中，我使用了 @Input

@Input() placeholder: string;

在子 html 文件中我有

<mat-form-field>
  <mat-select 
  [multiple]="multiple"
  [placeholder]="placeholder">
    <mat-option 
    *ngFor="let item of optionsList" 
    [value]="item">{{item}}</mat-option>
  </mat-select>
</mat-form-field>

我得到的是 "placeholder" 而不是 "Select"。

有什么想法吗？谢谢:)

Answer 1

在子 HTML 中，不使用引号而是使用双大括号：

[placeholder]={{placeholder}}

通过使用双引号，您分配的是字符串 "placeholder" 的字面值，而 Angular 则采用双大括号 {{}} 之间的变量值。

Answer 2

由于您将字符串作为输入传递，因此需要将其包含在 ''

中

<app-multiselect [placeholder]="'Select'" ></app-multiselect>

并且当你绑定时，你应该使用字符串插值作为 {{}}

 <mat-select placeholder="{{placeholder}}">

STACKBLITZ DEMO

Answer 3

我遇到了类似的问题，这对我有用；我从 https://stackblitz.com/edit/angular-mat-select-data-ucmfzw?file=app.component.html

得到了这个解决方案

<app-multiselect 
    placeholder="{{'Select'}}"
    ></app-multiselect>

Angular Material 占位符不适用于@Input

Angular Material placeholder is not working with @Input

angular-material

angular-material2

angular