在 ngFor 中动态添加值答案

【问题标题】：Add Dynamically Value in ngFor在 ngFor 中动态添加值
【发布时间】：2019-06-23 08:35:35
【问题描述】：

我想使用ngFor 动态添加显示值（在<mat-option> 中）。在我的 HTML 代码中，我在 <mat-option> 下添加了 {{'selected'+ displayValue}}，并且 displayValue 在 Class 中定义。有人可以帮忙吗？谢谢。

<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;
  }
}

【问题讨论】：

理想情况下 {{selected.viewValue}} 在 HTML 中正确显示。但是在 {{selected.viewValue}} 我想从我的 SelectboxComponent 代码中将动态的东西传递给 viewValue。所以我在我的 HTML 中添加了 {{'selected'+ displayValue}}，'displayValue' 在 SelectboxComponent 代码中定义。我希望问题很清楚。谢谢。

标签： angular typescript angular-material2 angular2-directives

【解决方案1】：

你可以在你的 html mat-option 中使用它

{{selected[displayValue]}}

在这里查看：https://stackblitz.com/edit/angular-material-with-angular-v5-my8wzh?embed=1&file=app/app.component.html

【讨论】：

【解决方案2】：

我认为你的绑定弄错了。您的displayValue 将始终在您的视图上显示字符串“viewvalue”。为了显示所选食物和其他选项，您需要利用绑定的selected对象的访问权限，并选择viewValue字符串属性以显示在视图中。

我在下面做了相关的编辑。

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;
  }
}

【讨论】：