无法在 Angular 上使用 ngmodel 设置默认选择属性 9

Question

我正在尝试使用 Angular 9 上的默认值创建select 。我需要双向绑定，因为选择的值必须立即显示在选择旁边的元素中。 我已经尝试了一切，从使用 Angular Material 的选项实现到普通选择框，但我似乎无法设置默认选择。

我需要使用[selection]上的isSelected来控制所选元素，但是我尝试过的所有内容都将显示一个空白选择框。

select本身如下：

<select [(ngModel)]="selectedPrice">
    <option *ngFor="let value of values" [ngValue]="value.propertyName" [selected]="value.isSelected == true"> {{value.str}} </option>
</select>

数组是：

values = [{ str: 'Varejo 1', propertyName: 'varejo1', isSelected: true, },
    { str: 'Varejo 2', propertyName: 'varejo2', isSelected: false },
    { str: 'Varejo 3', propertyName: 'varejo3', isSelected: false },
    { str: 'Atacado 1', propertyName: 'atacado1',  isSelected: false },
    { str: 'Atacado 2', propertyName: 'atacado2',  isSelected: false },
  ]

组件是：

export class ProductDialogComponent implements OnInit {

  selectedPrice: number;

  values = [{ str: 'Varejo 1', propertyName: 'varejo1', isSelected: true, },
    { str: 'Varejo 2', propertyName: 'varejo2', isSelected: false },
    { str: 'Varejo 3', propertyName: 'varejo3', isSelected: false },
    { str: 'Atacado 1', propertyName: 'atacado1',  isSelected: false },
    { str: 'Atacado 2', propertyName: 'atacado2',  isSelected: false },
  ];

  constructor(
    public dialogRef: MatDialogRef<MomfortProductsTableComponent>,
    @Inject(MAT_DIALOG_DATA) public product: MomfortProduct) {
  }

  ngOnInit(): void {

  }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

我目前得到这个：

我将如何做到这一点，以便我的[selected]条件有效？

Answer 1

您可以为selectedPrice分配一个值：

在您的component.ts中：

this.selectedPrice = this.values.find(({ isSelected }) => isSelected ).propertyName;

或者如果你直接想给它一个 static 值：

this.selectedPrice = 'varejo1'

更新

使用selectedPrice: String

select 元素可以是：

<select [(ngModel)]="selectedPrice">
    <option *ngFor="let value of values" [ngValue]="value.propertyName">{{value.str}}</option>
</select>

您已经有了双向绑定，因为[(ngModel)]="selectedPrice"每当您想访问component.ts中选定选项的值时，只需使用this.selectedPrice 。