Невозможно установить свойство выбора по умолчанию с ngmodel на Angular 9

Question

Я пытаюсь создать select со значением по умолчанию Angular 9. Мне нужно двустороннее связывание, потому что выбранное значение должно мгновенно отображаться в элементе рядом с выделением. Я перепробовал все, от использования Angular реализации параметра Material до обычных блоков выбора, но я не могу установить выбор по умолчанию.

Мне нужно управлять выбранным элементом с помощью isSelected на [selection], но все, что я пробовал, отобразит пустое поле выбора.

Само выделение выглядит следующим образом:

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

или если вы хотите напрямую присвоить ему значение stati c:

this.selectedPrice = 'varejo1'

update

Используйте selectedPrice: String

, и элемент выбора может быть:

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

Вы уже иметь двустороннюю привязку из-за [(ngModel)]="selectedPrice" всякий раз, когда вы хотите получить доступ к значению выбранной опции в вашем component.ts, просто используйте this.selectedPrice.