I have an error with dropdown of mat-select. I get the values from the database but I cannot display it in the dropdown. It doesn't display any error, it gives me 2 values as the number of elements I have in my array but in the dropdown they are blank. eventTypeDTO screen console

  export interface eventTypeDTO {
      id: number;
      name: string;
    }

html file.....................................................................

<mat-form-field apperance="outline">
    <mat-label>Odaberi vrstu događaja</mat-label>
    <mat-select formControlName="event">
      <mat-option *ngFor="let eventType of eventTypes" [value]="eventType.id">
        {{ eventType.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

ts file............................................................................

export class FilterEventsComponent implements OnInit {
  constructor(
    private formBuilder: FormBuilder,
    private eventsService: EventsService,
    private eventTypeService: EventTypesService
  ) {}

  form: FormGroup;


  eventTypes: eventTypeDTO[];

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      title: '',
      //city: '',
      event: '',
      dateOfEvent: Date,
    });

    this.eventTypeService.getAllEventTypes().subscribe((eventTypes) => {
      this.eventTypes = eventTypes;
      console.log(this.eventTypes);
    });
  }

When I try to hard code it, like in the code below, it's working well.....................................

    export class FilterEventsComponent implements OnInit {
      constructor(
        private formBuilder: FormBuilder,
        private eventsService: EventsService,
        private eventTypeService: EventTypesService
      ) {}
    
      form: FormGroup;


  events: {
    id: number;
    name: string;
  }[];
    
      ngOnInit(): void {
    this.events = [
      {
        id: 1,
        name: 'Nogomet',
      },
    ];
        this.form = this.formBuilder.group({
          title: '',
          //city: '',
          event: '',
          dateOfEvent: Date,
        });
    
        this.eventTypeService.getAllEventTypes().subscribe((eventTypes) => {
          this.eventTypes = eventTypes;
          console.log(this.eventTypes);
        });
      }

CodePudding user response：

id -> Id

name -> Name

The interface doesn't match the data