Angular Material占位符不能与@Input一起使用

Question

我正在使用棱角分明的材料在我的父组件中

<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>

我得到“占位符”而不是“选择”。

有任何想法吗？谢谢 ：）

Answer 1

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

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

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

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

STACKBLITZ DEMO

Answer 2

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

[placeholder]={{placeholder}}

通过使用双引号，您将分配字符串“placeholder”的文字值，而Angular在双大括号{{}}之间获取变量的值。

Answer 3

我有类似的问题，这对我有用;我从https://stackblitz.com/edit/angular-mat-select-data-ucmfzw?file=app.component.html得到了这个解决方案

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