Mat-Option, показывающий опции, но не выбирающий при нажатии

Question

Новый разработчик здесь.Работа с Angular 7 и использование mat-option для вывода списка имен, добавленных в базу данных.Имена хорошо отображаются при щелчке поля, однако при попытке выбрать имя ничего не происходит.

Из HTML:

<form #f="ngForm" (ngSubmit)="onSubmit()" [formGroup]="leaderratingForm">
    <div>
        <div>
            <mat-form-field>
                <mat-select placeholder="Select a Leader" formControlName="LeaderId" required>
                    <mat-option *ngFor="let leaderId of leaders" [value]="leaderId.LeaderId">{{leaderId.LeaderName}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
     </div>
</form>

Из контроллера:

export class LeaderratingCreateComponent implements OnInit {

  leaderratingForm: FormGroup;
  leaders: Leader[];

  constructor(private _leaderratingService: LeaderratingService, private _form: FormBuilder, private _router: Router, private leaderService: LeaderService) { 
    this.createForm();
  }

  ngOnInit() {
    this.leaderService.getLeaders().subscribe((leaders: Leader[]) => {this.leaders = leaders; });
  }

  createForm() {
    this.leaderratingForm = this._form.group({
    LeaderID: new FormControl,
    SpeakingAbilityRating: new FormControl,
    EngagingRating: new FormControl,
    AuthenticRating: new FormControl,
    RapportRating: new FormControl,
    });
  }

Этот код идентичен тому, что я использую в другом месте для компонента, который на самом деле работает какожидается (выпадающие варианты есть и могут быть выбраны).Спасибо!

Answer 1

Из того, что я вижу, шаблон и компонент имеют некоторые несоответствия с именами свойств Leader.

У вас есть LeaderID в вашем компоненте, но LeaderId в вашем шаблоне.Это должно привести к ошибке, потому что вы ввели formControlName="LeaderId" в <mat-select> (в отличие от LeaderID).

Вы получите что-то вроде:

Не удается найти управлениес именем: 'LeaderId'

Если у вас все еще есть проблемы с выбором элемента после его изменения, проверьте, совместим ли ваш класс / интерфейс Leader: возможно, вы пытаетесь получить доступ к [value]="leaderId.LeaderId"когда ваш Leader класс / интерфейс имеет свойство LeaderID вместо

Надеюсь, это поможет:)