我一直试图在我的预订应用程序中创建一个日期选择器,但由于某种原因,我不能让ng2-datepicker工作(一些错误,不是一个有效的组件)
我已经求助于一个普通的日期选择器,但不能在我的组件中使用ngmodel。我已经得到了FormsModule导入到它应该的任何地方,但仍然得到相同的错误。请找到下面的代码
这是我正在尝试使用它的模块。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Property } from 'src/app/models/property';
import { PropertiesService } from 'src/app/shared/services/properties.service';
import { DatepickerModule } from 'ng2-datepicker';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModel } from '@angular/forms';
@Component({
selector: 'app-book-property',
templateUrl: './book-property.component.html',
styleUrls: ['./book-property.component.css']
})
export class BookPropertyComponent implements OnInit {
property: Property;
startDate = new Date();
endDate = new Date();
constructor(private propService: PropertiesService, private route: ActivatedRoute) { }
ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
this.propService.getPropertyById(id).subscribe((property: Property) => {
this.property = property;
});
}
bookProperty(){
}
}
<div class="container">
<div class="wrapper">
<div class="row">
<div class="card p-3 mb-2">
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<div class="icon"> <i class="bi bi-house"></i> </div>
<div class="ms-2 c-details">
<h6 class="mb-0">{{property.name}}</h6>
</div>
</div>
</div>
<div class="container">
<img [src]="property.images.length > 0 ? property.images[0] : 'placeholder-image-url'"
alt="Property image">
</div>
<div class="mt-5">
<h3 class="heading"><br></h3>
<div class="mt-5">
<div class="property-details">
<h6>Rate <b>€{{property.ratePerNight}} </b> per night | {{property.address}}</h6>
<h6>{{property.shortDescription}}</h6>
<h6>Sleeps: {{property.sleeps}}</h6>
<div class="form-group row">
<label for="start-date" class="col-sm-2 col-form-label">Start Date:</label>
<div class="col-sm-4">
<input type="date" class="form-control" id="start-date" [(ngModel)]="startDate">
</div>
<label for="end-date" class="col-sm-2 col-form-label">End Date:</label>
<div class="col-sm-4">
<input type="date" class="form-control" id="end-date" [(ngModel)]="endDate">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的app. module. ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideDatabase,getDatabase } from '@angular/fire/database';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
import { PropertiesComponent } from './components/properties/properties.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AppHeaderComponent } from './components/app-header/app-header.component';
import { AuthService } from './shared/services/auth.service';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
import { ProfileComponent } from './components/profile/profile.component';
import { HomeComponent } from './components/home/home.component';
import { VerifyEmailComponent } from './components/verify-email/verify-email.component';
import { UserPropertiesComponent } from './components/user-properties/user-properties.component';
import { CreatePropertiesComponent } from './components/create-properties/create-properties.component';
import { ReactiveFormsModule } from "@angular/forms";
import { EditPropertiesComponent } from './components/edit-properties/edit-properties.component';
import { AngularFireStorageModule, BUCKET } from '@angular/fire/compat/storage';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent,
ForgotPasswordComponent,
PropertiesComponent,
DashboardComponent,
AppHeaderComponent,
ProfileComponent,
HomeComponent,
VerifyEmailComponent,
UserPropertiesComponent,
CreatePropertiesComponent,
EditPropertiesComponent
],
exports: [ LoginComponent],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
CommonModule,
AngularFireFunctionsModule,
AngularFireStorageModule,
FormsModule,
ReactiveFormsModule
],
providers: [AuthService, AngularFirestore, {provide: BUCKET, useValue: 'castleblayney-bookings-images'}],
bootstrap: [AppComponent]
})
export class AppModule { }
我怀疑也许ng2-datepicker问题和这个有联系?
错误:
Error: src/app/components/book-property/book-property.component.html:27:84 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.
27 <input type="date" class="form-control" id="start-date" [(ngModel)]="startDate">
~~~~~~~~~~~~~~~~~~~~~~~
src/app/components/book-property/book-property.component.ts:12:16
12 templateUrl: './book-property.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component BookPropertyComponent.
Error: src/app/components/book-property/book-property.component.html:27:97 - error TS2740: Type 'Event' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 37 more.
27 <input type="date" class="form-control" id="start-date" [(ngModel)]="startDate">
~~~~~~~~~~~
28 </div>
~~~~~
src/app/components/book-property/book-property.component.ts:12:16
12 templateUrl: './book-property.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component BookPropertyComponent.
Error: src/app/components/book-property/book-property.component.html:31:82 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.
31 <input type="date" class="form-control" id="end-date" [(ngModel)]="endDate">
~~~~~~~~~~~~~~~~~~~~~
src/app/components/book-property/book-property.component.ts:12:16
12 templateUrl: './book-property.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component BookPropertyComponent.
Error: src/app/components/book-property/book-property.component.html:31:95 - error TS2322: Type 'Event' is not assignable to type 'Date'.
31 <input type="date" class="form-control" id="end-date" [(ngModel)]="endDate">
~~~~~~~~~
32 </div>
~~~~~
src/app/components/book-property/book-property.component.ts:12:16
12 templateUrl: './book-property.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component BookPropertyComponent.
× Failed to compile.
任何关于这一点的说明都很好,正如网上所有的答案所说,只需在这里添加它,但正如你所看到的,它不起作用
Github链接:link
2条答案
按热度按时间uajslkp61#
您已将BookPropertyComponent导入到app-routing.module.ts中,但忘记将其导入到app.module.ts中
bis0qfac2#
未在App.Module.TS中声明BookProperty组件
我生命中的四个小时就这样白白浪费了