Заполнитель углового материала не работает с @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

У меня была похожая проблема, и это сработало для меня;Я получил это решение от https://stackblitz.com/edit/angular-mat-select-data-ucmfzw?file=app.component.html

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

Answer 3

В дочернем HTML вместо использования кавычек используйте двойные фигурные скобки:

[placeholder]={{placeholder}}

Используя двойные кавычки, вы присваиваете буквальное значение строки «placeholder», тогда какAngular принимает значение переменной, если оно заключено в двойные фигурные скобки {{}}.