無法在 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 。