角材料占位符不适用于@Input

Question

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

a = [["one"], ["two"], ["three"], ["four"]]

def count(a):
    return list(enumerate(a))

aa = count(a)
print(aa)

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

list

在我拥有的子html文件中

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

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

有什么想法吗？谢谢：）

Answer 1

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

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