我在 mat-select 的下拉菜单中出错。我从数据库中获取值，但无法在下拉列表中显示

Question

我对 mat-select 的下拉菜单有错误。我从数据库中获取值，但无法在下拉列表中显示。它没有显示任何错误，它给了我 2 个值作为数组中元素的数量，但在下拉列表中它们是空白的。事件类型DTO screen console

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

html 文件................................................ .........

<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 文件................................................ ...................................

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

当我尝试对其进行硬编码时，如下面的代码所示，它运行良好...................................... .........

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

Answer 1

id -> Id

name -> Name

接口与数据不符

我在 mat-select 的下拉菜单中出错。我从数据库中获取值，但无法在下拉列表中显示

I have an error with dropdown of mat-select. I get the values from the database but I cannot display it in the dropdown

html

angular

mat-select