我是一名试图学习棱角法则的学生,但遇到一些麻烦,如果这是一个愚蠢的问题,抱歉。
基本上,我有一个带有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
元数据中声明。
@Component
装饰器,这样一来,它被视为模型而不是组件,除非您忘记粘贴该部分。这是工作中的闪电战,AppComponent
您在这里SelectGender
。
更新:
对于您的更新问题,假设您的HTML代码段是的一部分post-create.component.html
,则将无法正常工作,因为您正在尝试循环使用甚至在相关TS部分(PostCreateComponent
)上都不存在的值,请移动:
genders: Gender[] = [
{ value: 'm', viewValue: 'Male' },
{ value: 'f', viewValue: 'Female' }
]
要PostCreateComponent
TS部分仅仅是。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句