Добавить динамически значение в ngFor - PullRequest
Новая
       20

Добавить динамически значение в ngFor

0 голосов
/ 30 января 2019

Я хочу добавить отображаемое значение (в <mat-option>) динамически, используя ngFor.В моем HTML-коде я добавил {{'selected' + displayValue}} в <mat-option>, и 'displayValue' определено в классе.Может ли кто-нибудь помочь в этом.Спасибо. 

    <mat-form-field>
    <mat-select placeholder="Favorite food"
   [(ngModel)]="selectedValueModel"
   (ngModelChange)="changedValue($event)" name="food" [compareWith]="compFn">
      <mat-option *ngFor="let selected of SelectedObjectData" [value]="selected">
        {{'selected'+ displayValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>




export class SelectboxComponent {

  displayValue= 'viewValue'

    SelectedObjectData: any[] = [{ value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }];

  @Input() selectedValueModel = {value: 'tacos-2', viewValue: 'Tacos'};

  @Output() selectedValueModelChange = new EventEmitter()

  changedValue(newValue: any) {
    this.selectedValueModel = newValue
    this.selectedValueModelChange.emit(newValue)
  }

  compFn(c1: any, c2: any): boolean {
    return c1 && c2 ? c1.value === c2.value : c1 === c2;
  }
}

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Я думаю, что вы неправильно поняли привязку.Ваш displayValue всегда будет отображать строку 'viewvalue' в вашем представлении.Чтобы отобразить выбранный продукт и другие параметры, необходимо использовать доступ к объекту selected в привязке и выбрать строковое свойство viewValue, которое будет отображаться при просмотре.

Iсделали соответствующие отредактированные ниже.

component.html: 

<mat-form-field>
    <mat-select placeholder="Favorite food"
   [(ngModel)]="selectedValueModel"
   (ngModelChange)="changedValue($event)" name="food" [compareWith]="compFn">
      <mat-option *ngFor="let selected of SelectedObjectData" [value]="selected">
        {{'selected'+ selected.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>

component.ts: 

export class SelectboxComponent {

  displayValue= 'viewValue'

    SelectedObjectData: any[] = [{ value: 'steak-0', viewValue: 'Steak' },
    { value: 'pizza-1', viewValue: 'Pizza' },
    { value: 'tacos-2', viewValue: 'Tacos' }];

  @Input() selectedValueModel = {value: 'tacos-2', viewValue: 'Tacos'};

  @Output() selectedValueModelChange = new EventEmitter()

  changedValue(newValue: any) {
    //this.selectedValueModel = newValue
    //this.selectedValueModelChange.emit(newValue)

    // selected value will be reflected here, do what you want with the newValue object
    console.log(newValue)
  }

  compFn(c1: any, c2: any): boolean {
    return c1 && c2 ? c1.value === c2.value : c1 === c2;
  }
}
0 голосов
/ 30 января 2019

Вы можете использовать это в своем html-параметре 

{{selected[displayValue]}}

Проверьте здесь: https://stackblitz.com/edit/angular-material-with-angular-v5-my8wzh?embed=1&file=app/app.component.html

...