firebase 无法绑定到“ngModel”,因为它不是“input”的已知属性,-已导入它

jv4diomz  于 2023-03-09  发布在  其他
关注(0)|答案(2)|浏览(359)

我一直试图在我的预订应用程序中创建一个日期选择器,但由于某种原因,我不能让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

uajslkp6

uajslkp61#

您已将BookPropertyComponent导入到app-routing.module.ts中,但忘记将其导入到app.module.ts中

bis0qfac

bis0qfac2#

未在App.Module.TS中声明BookProperty组件
我生命中的四个小时就这样白白浪费了

相关问题