Как передать ключ для опции mat-select в качестве параметра, используя @Input в Angular

#angular #angular-material #angular-library

#angular #angular-материал #angular-библиотека

Вопрос:

Я хотел бы показать значения параметров mat-option на основе строки, которая была отправлена из родительского компонента в дочерний с использованием @Input.

Пожалуйста, найдите приведенный ниже блок кода

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.optionvalue}}. я должен отправить строку ‘optionvalue’ из родительского компонента, используя @Input. возможно ли это, пожалуйста, посоветуйте.

parentcomponent

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

** родительский html **

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

Ответ №1:

Если вы хотите передать свойство, которое будет использоваться для значения параметра, через родительский компонент, вы можете использовать следующее выражение {{option[optionValue]}} в вашем шаблоне.

Передайте строку свойства следующим образом:

@Input() optionValue: string;

1. я пробовал, как указано выше, но выпадающий список отображается как пустой. пожалуйста, посоветуйте

2. Вы убедились, что имя переменной правильное? В вашем примере он всегда пишется по-разному. Входные данные есть OptionValue , в шаблоне они есть optionvalue и в вашем массиве они есть optionValue . Может быть, создать stackblitz?

3. Теперь он работает. проблема заключалась в орфографической ошибке. Большое спасибо

Ответ №2:

Вы могли бы @Input указать имя ключа.

Родительский

.html

<mat-dropdown optionValue="optionvalue">

Дочерний

.html

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

.ts

 @Input() optionValue: string;