Angular Material 占位符不适用于 @Input答案

【问题标题】：Angular Material placeholder is not working with @InputAngular Material 占位符不适用于 @Input
【发布时间】：2019-03-23 21:42:06
【问题描述】：

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

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

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

有什么想法吗？谢谢:)

【问题讨论】：

标签： angular angular-material angular-material2

【解决方案1】：

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

[placeholder]={{placeholder}}

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

【讨论】：

尝试了 [placeholder]={{placeholder}} 和 [placeholder]="{{placeholder}}"。它给出了错误。 [multiple]="multiple" 正在工作，占位符应该以相同的方式工作。 :(
你从哪里传递不同的占位符？如果要更改 @Input() 占位符值，则可以在组件内创建一个方法来更改它
谢谢！解决方案已找到！请看上面的聊天

【解决方案2】：

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

中

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

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

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

STACKBLITZ DEMO

【讨论】：

它正在工作，因为您没有通过 @Input 从另一个元素传递它。我提到这一点：material.angular.io/components/select/api。如果我通过输入传递它并使用您的脚本，我将得到一个硬编码的病房“选择”
什么意思？只需查看上面的演示，它有一个父子组件
如果你看到有一个 app.component 并选择用户 mat-select 的组件
是的，但我正在尝试使用 @Input 装饰器并从另一个元素传递“选择”。在您的示例中，它只是一个硬编码常量。在角度材料中，他们提到了通过输入传递它的选项。假设我想对多个实例使用选择，并且每次我想传递不同的占位符。这就是我提到的
不是。您从哪里传递它的其他元素以及 .ts 文件中的 @Input 装饰器在哪里？

【解决方案3】：

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

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

【讨论】：