简单的<mat-option>不起作用。IDE或浏览器中没有错误

杰克·卡尔塔吉龙

我是一名试图学习棱角法则的学生,但遇到一些麻烦,如果这是一个愚蠢的问题,抱歉。

基本上,我有一个带有mat-select的mat-form-field。mat-select在浏览器中显示,但选项不会下拉。这是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' },];}

我已经完成了所有导入,但是这是app.module.ts的情况:

    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' },

      ];
    }

我已经有一段时间了,它可能是一个愚蠢的错误,但是任何帮助将不胜感激,谢谢

我认为那是因为您的组件SelectGender,似乎它没有在您的@NgModule元数据中声明

  • PS:同样,我没有看到任何@Component装饰器,这样一来,它被视为模型而不是组件,除非您忘记粘贴该部分。

这是工作中的闪电战AppComponent在这里SelectGender


更新

对于您的更新问题,假设您的HTML代码段是的一部分post-create.component.html,则将无法正常工作,因为您正在尝试循环使用甚至在相关TS部分(PostCreateComponent都不存在的值,请移动:

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

PostCreateComponentTS部分仅仅是。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

<mat-select>中没有足够的空间。如何添加多行<mat-option>?

简单的jQuery slideToggle在任何浏览器中均不起作用

按钮的简单javascript代码在任何浏览器中均不起作用

聚合物简单组件不起作用-加载了所有内容,但没有Shawdow根,没有错误

角材料组件不起作用:'mat-option'不是一个已知元素

在 Angular 中,不会为 angular mat-option 调用 onSelectionChange

要在mat-list-option中更改文本颜色

有條件地將 mat-option 添加到 mat-select

在 mat-select/mat-option 中以编程方式触发 [compareWith]

使用简单数组时,所选值在ng-option中第一次不起作用

当不再在 Angular 中悬停 mat-option 时,有没有办法调用函数?

为什么不能选择mat-select的mat-option?

在<mat-select> <mat-option>内部使用[innerHTML]

mat-autocomplete 在 mat-table 中不起作用

测试 JavaScript 对象如何与简单的 HTML 一起工作,但它在浏览器上不起作用

如何在Angular 5的Mat-Select Option中获取选定值的ID

带删除功能的 mat-option

读取 <mat-option> angular 的值

网页没有显示在我的简单网络浏览器中(用Java编写)

错误消息在简单的 javascript 表单验证中不起作用

JavaScript中的简单变异观察器示例不起作用

python中的简单装饰器功能不起作用

Javascript 中的简单事件侦听器不起作用

角材料,以选择mat-list-option并显示所选mat-list-option的相应数据

@JsonView在简单测试中不起作用

简单的for循环在Jekyll中不起作用

简单的onload在JSFIddle中不起作用

简单JSON在Ruby中不起作用

在 Pandas 中,简单的 astype() 不起作用