[英]Angular Material placeholder is not working with @Input
I am using angular materuial. 我正在使用角度材料。 In the parent component I have
在父组件中,我有
<app-multiselect
[optionsList]="propertyTypeList"
[multiple]=true
[placeholder]="Select"
></app-multiselect>
In the child component in the .ts file I am using an @Input 在.ts文件的子组件中,我正在使用@Input
@Input() placeholder: string;
In the child html file I have 在子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>
I am getting "placeholder" instead of "Select". 我正在获得“占位符”,而不是“选择”。
Any ideas? 有任何想法吗? Thanks :)
谢谢 :)
In the child HTML, instead of using quotes use double curly bracket: 在子HTML中,不要使用引号,而是使用双大括号:
[placeholder]={{placeholder}}
By using double quotes you are assigning the literal value of the string "placeholder", whereas Angular takes the value of the variable when it's between double curly brackets {{}}. 通过使用双引号,您可以分配字符串“占位符”的文字值,而Angular在双括号{{}}之间时获取变量的值。
Since you are passing String as a Input, it needs to be enclosed within ''
由于您要将String作为输入传递,因此需要将其括在
''
<app-multiselect [placeholder]="'Select'" ></app-multiselect>
And when you are binding, you should use string interpolation as {{}}
并且在绑定时,应将字符串插值用作
{{}}
<mat-select placeholder="{{placeholder}}">
I had a similar issue and this worked for me; 我遇到了类似的问题,这对我有用。 I got this solution from https://stackblitz.com/edit/angular-mat-select-data-ucmfzw?file=app.component.html
我从https://stackblitz.com/edit/angular-mat-select-data-ucmfzw?file=app.component.html获得了此解决方案
<app-multiselect
placeholder="{{'Select'}}"
></app-multiselect>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.