如何在Angular中使用@Input将mat-select选项的键作为参数传递

问题描述

我想基于使用@Input从父组件发送到子组件的字符串显示mat-option的选项值。

请找到以下代码块

cdropdown.component.ts

@Componenet({
selector: 'mat-dropdown',templateUrl: 'mat-dropdown.component.html',styleUrls: ['mat-dropdown.componenet.css']
})
export class dropDownComponent implements OnInit {
 constructor(){}

@input() selectFormControl : FormControl;
@input() options : Object[];
@input() OptionValue: any;
}

cdropdown.component.html

<mat-select [formControl]="selectFormControl" [placeholder]="placeholder">
  <mat-option *ngFor="let  option of options" [value]="option">
    {{option.optionvalue}}
  </mat-option>
</mat-select>

我正在为mat-select创建一个公共组件。因此，我将选项的值作为对象列表传递。选项的键“ optionvalue”可能不同。所以我想定义应该为mat-option使用什么键。

现在我有了{{option.optionvalue}}。我必须使用@Input从父组件发送字符串'optionvalue'。有可能请告知。

父级组件

options : object[] = [
 {
  key:1,optionValue:data1
 },{
  key:2,optionValue:data2
 }
]

**父HTML **

<mat-dropdown [options]= "options" ></mat-dropdown>

解决方法

如果要通过父组件传递用于选项值的属性，则可以在模板中使用以下表达式{{option[optionValue]}}。

按如下所示传递属性字符串：

@Input() optionValue: string;

,

您可以@Input密钥名称。

父母

.html

<mat-dropdown optionValue="optionvalue">

孩子

.html

...
    {{option[optionValue]}}
...

.ts

@Input() optionValue: string;