простоне работает.Нет ошибки в IDE или браузере

Question

Я студент, пытающийся изучать английский, но у меня возникли проблемы, поэтому извините, если это глупый вопрос.

По сути, у меня есть поле формы mat с выбором mat.Выбор циновки отображается в браузере, но опции не раскрываются.Вот html и .ts

HTML:

<mat-form-field>
  <mat-select placeholder="Gender">
    <mat-option *ngFor="let Gender of genders" [value]="Gender.value">
      {{Gender.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>
<!--Form for Gender-->

.ts:

export interface Gender {
value: string;
viewValue: string;
}

export class SelectGender {
genders: Gender[] = [
   { value: 'm', viewValue: 'Male' },
   { value: 'f', viewValue: 'Female' },];}

У меня уже есть все Imports, но вот app.module.ts incase:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { PostDetailsComponent } from './post-details/post-details.component';
    import { PostService } from './services/post.service';
    import { HttpClientModule } from '@angular/common/http';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { RouterModule, Routes } from '@angular/router';

    import { FormsModule } from "@angular/forms";
    import {
      MatInputModule,
      MatMenuModule,
      MatCardModule,
      MatButtonModule,
      MatIconModule,
      MatToolbarModule,
      MatExpansionModule,
      DateAdapter,
      MatFormFieldModule,
      MatNativeDateModule,
      MatSelectModule,

    } from '@angular/material';
    import { MatDatepickerModule } from '@angular/material/datepicker';
    import { MatRadioModule } from '@angular/material/radio';
    import { PostCreateComponent } from './post-create/post-create.component';
    import { PostEditComponent } from './post-edit/post-edit.component';
    import { PostSigninComponent } from './post-signin/post-signin.component';
    import { MembershipTypesComponent } from './membership-types/membership-types.component';

    const appRoutes: Routes = [
      {
        path: 'list',
        component: PostDetailsComponent
      },
      {
        path: 'create',
        component: PostCreateComponent
      },
      {
        path: 'edit/:id',
        component: PostEditComponent
      },
      {
        path: 'membershipTypes',
        component: MembershipTypesComponent
      }
    ];


    @NgModule({
      declarations: [
        AppComponent,
        PostDetailsComponent,
        PostCreateComponent,
        PostEditComponent,
        PostSigninComponent,
        MembershipTypesComponent
      ],
      imports: [
        RouterModule.forRoot(appRoutes),
        BrowserModule,
        FormsModule,
        HttpClientModule,
        MatIconModule,
        MatButtonModule,
        BrowserAnimationsModule,
        MatInputModule,
        MatFormFieldModule,
        MatCardModule,
        MatButtonModule,
        MatToolbarModule,
        MatExpansionModule,
        MatMenuModule,
        MatSelectModule,   //imported for gender picker + membership type
        MatDatepickerModule,     //imported for datepicker
        MatNativeDateModule, //for date picker
        MatRadioModule//radio buttons
      ],
      providers: [PostService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Добавление во весь component.ts

    import { Component, OnInit } from '@angular/core';
    import { NgForm } from "@angular/forms";
    import { PostService } from '../services/post.service';
    import { MatSelectModule } from '@angular/material/select';



    @Component({
      selector: 'app-post-create',
      templateUrl: './post-create.component.html',
      styleUrls: ['./post-create.component.css'],
    })
    export class PostCreateComponent implements OnInit {

      constructor(private service: PostService) { }

      onAddPost(form: NgForm) {

        this.service.addPost(form.value.FirstName, form.value.SurName, form.value.Address, form.value.phoneNumber).subscribe();
        //when adding anything here make sure to add it to post.service as well as post.model.ts and server.js/app.post

        console.log(form.value);
        form.resetForm();
      }

      ngOnInit() {
      }

    } export interface Gender {
      value: string;
      viewValue: string;
    }

    export class SelectOverviewExample {
      genders: Gender[] = [
        { value: 'm', viewValue: 'Male' },
        { value: 'f', viewValue: 'Female' }
      ]
    }

    export interface type {
      value: string;
      viewValue: string;
    }

    export class MembershipType {
      types: type[] = [
        { value: '1day', viewValue: 'Single Session : €8 / €6.40' },
        { value: '1month', viewValue: '1 month: €30/€24' },
        { value: '3months', viewValue: '3 month: €75/ €60' },
        { value: '6months', viewValue: '6 month: €129/ €103' },
        { value: '12Months', viewValue: '12 month: €199/ €160' },

      ];
    }

Я уже давно занимаюсь этим, и это, вероятно, глупая ошибка, но любая помощь будет оценена, спасибо

Answer 1

Вы должны добавить это в свой класс компонента PostCreateComponent, а не вне класса компонента.Поскольку вы объявили его вне класса компонента, он не будет частью компонента, и поэтому вы не смогли увидеть параметры

 genders: Gender[] = [
        { value: 'm', viewValue: 'Male' },
        { value: 'f', viewValue: 'Female' }
      ]

, которые выглядят так:

 export class PostCreateComponent implements OnInit {

      constructor(private service: PostService) { }

       genders: Gender[] = [
            { value: 'm', viewValue: 'Male' },
            { value: 'f', viewValue: 'Female' }
          ]

      onAddPost(form: NgForm) {

        this.service.addPost(form.value.FirstName, form.value.SurName, form.value.Address, form.value.phoneNumber).subscribe();
        //when adding anything here make sure to add it to post.service as well as post.model.ts and server.js/app.post

        console.log(form.value);
        form.resetForm();
      }

  ngOnInit() {
  }

}

Answer 2

Я думаю, что это из-за вашего компонента SelectGender, кажется, он не был объявлен в ваших @NgModule метаданных.

• PS : также я не вижу никакихДекоратор @Component, таким образом, он считается моделью больше, чем компонент, если только вы не забудете вставить эту часть.

Вот рабочий stackblitz , где AppComponent - это SelectGender.

---

ОБНОВЛЕНИЕ :

Для вашего обновленного вопроса, предположим, что ваш HTML-фрагмент является частьюpost-create.component.html, это не сработает, так как вы пытаетесь зациклить значения, которые даже не существуют в соответствующей части TS (PostCreateComponent), вы просто перемещаете:

genders: Gender[] = [
        { value: 'm', viewValue: 'Male' },
        { value: 'f', viewValue: 'Female' }
      ]

в PostCreateComponent часть Ts.